Use the filter property - CSS Tutorial

- [Instructor] In this chapter, we take a step away from background styles, to learn how to modify the appearance of any page element using CSS Filters. This first video will focus on the basic CSS filter styles. A CSS filter is applied using the filter property, where effect is one of 11 built-in CSS filters. And parameters are the preemptive values that are applied to the chosen filter. Different filters will have different parameters. This web page provides an interactive demonstration of the 11 built-in CSS filters. Let's explore each one. The brightness filter decreases or increases the brightness of the colors in the object, while the contrast filter is used to decrease or increase the contrast between the colors in the object. We can change the colors themselves, first by changing the colors to grayscale, and then by changing the colors to sepia tone. If we want, we can increase or decrease the color saturation using the saturate filter. And we can replace each color with its opposite using the invert filter. Or we can rotate each color in the object by a specified number of degrees on the color wheel. The blur filter blurs the object, starting from a value of zero pixels, in which no blurring occurs, up to increasingly higher values with greater blurring. And the opacity filter is used to create semi-transparent objects, where a value of zero results in a completely transparent object, up to a value of one which results in an object that's completely opaque. Like the box shadow style, the drop shadow filter is used to add shadows to the object. It has four values, the first two of which set the horizontal and vertical offset of the shadow, the third value sets the blur radius, and the fourth value sets the shadow color. The final built-in CSS filter is the SVG filter, which loads a filter definition from an SVG file. SVG is a graphical language used for scalable vector graphics. And interpreting the SVG language is outside the scope of this course, but if you're interested in learning more about SVG, we have many courses in our library specifically applying CSS to SVG files. For now, here's a sample of the type of effects you can create using this powerful and flexible language. Now let's CSS filters on the web page, continuing the Robert Frost poem, "Stopping by Woods on a Snowy Evening." Because of the nature of this poem, we might like the contents to appear as if they came from an old and weathered book. Let's create that effect using some CSS filters. First, let's apply the sepia filter to the entire page article. Setting the sepia value to 1, will make the contents of this page look as if they came from an old photograph. Both the H1 and H2 headings are enclosed within a DIV element with the ID head. Let's make that element semi-transparent by setting its opacity filter to 0.8. We can modify the H1 and H2 headings on this page using a blur filter, with the value set to 1 pixel, so that the headings appear as if they came from an old book with a slightly fuzzy typeface. The page contains an inline image of the poet Robert Frost. Let's enhance that image by adding a drop shadow filter, placing the shadow 10 pixels to the left, with a blur radius of 8 pixels and a shadow color of black. Let's add another drop shadow to the paragraph text, setting the shadow offset to 1 pixel in both the horizontal and vertical direction, the blur radius also to 1 pixel and the shadow color to black. There. That's all of our CSS filters used on this page. Let's save the file and see the effect. The result is a page that has the appearance of an old book with an old-fashioned typeface. In the next video, we'll explore how to combine multiple filters to create new visual effects.