In this next example we are applying our filter to a box, and comparing it to a box shadow. The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
Some of the filter options available do very similar things to other CSS features, for example drop-shadow() works in a very similar way and gives a similar effect to box-shadow or text-shadow. You can apply filters to any element and not just images. Take a look at the MDN page for filter for many other options you could try. Try contrast(200%), invert(100%) or hue-rotate(20deg) on the live example above.
You could also swap the values for some others. Play with the percentage and pixel parameters in the live example to see how the images change. The second is grayscale() by using a percentage we are setting how much color we want to be removed. The first is blur() - this function can be passed a value to indicate how much the image should be blurred. In the example below we have used two different values for filter. This property enables Photoshop-like filters right from CSS. One very nice property, which can help you bring interest to your designs, is the filter property.
While you can't change the composure of an image using CSS, there are some creative things you can do. When the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in. The button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect. Here we've set up some button styling along with focus/hover/active states.
0 kommentar(er)
