Learn

Like color functions, there are CSS functions specifically for the filter and backdrop-filter properties. These functions create a variety of visual effects for desired elements.

We can use the brightness() function for the filter and backdrop-filter property to affect an element’s overall brightness by applying a linear multiplier to it. The brightness() function takes a single argument for the amount, which can be either a number or percentage. Any value under 100% or 1.0 darkens the element, and any value over 100% or 1.0 will brighten the element. The default value of brightness is 100% or 1.0.

The blur() function applies a Gaussian blur to a specified element. The blur() function takes a single argument for the radius of the blur specified as a length. The argument of this function cannot be unitless unless a blur amount of 0 is being set.

The last filter function we are going to learn about is drop-shadow(). This function applies a drop shadow effect to the desired element. Take a look at the syntax below:

drop-shadow(offset-x offset-y blur-radius color)

Both offset-x and offset-y are required arguments that determine the horizontal and vertical offset respectively. While blur-radius is an optional argument that determines the shadow’s blur radius—the larger the value, the more blurred the shadow. Finally, the color argument is also optional and determines the shadow’s color. Notice that it is not necessary to separate each of the function’s arguments with commas.

Say we want to add a drop shadow to a <button> element. In the below code example, the horizontal offset is set to -10px and the vertical offset to 5px. It has a blur radius of 0.2rem and has a color of rgba(50, 200, 210, 0.6).

button { filter: drop-shadow(-10px 5px 0.2rem rgba(50, 200, 210, 0.6)); }

The drop shadow created on the button is offset vertically to the bottom and to the left. It also has a light blue color with 60% opacity.

There are more CSS functions that can be used with the filter and backdrop-filter properties—take a look at the full list to learn more!

Instructions

1.

The background image added to the .main-bg-image selector ruleset is a bit too bright.

Navigate to .main-bg-image and add a filter property. Set the value of the filter property to be the brightness() function with an argument of 0.6.

2.

To add a bit more flair to the title, give the word “Argentina” a shadow using the drop-shadow() function.

Inside the .header-modifier selector ruleset create a filter property and give it a value of the drop-shadow() function. Set the shadow’s x-offset to be 10px, its y-offset to be 5px, the blur amount to be 0.2rem and finally the shadow color to be rgba(236, 217, 203, 0.7).

3.

When we hover over the postcard we want it to be interactive.

Below the .bg-image selector ruleset, create an empty .card:hover .bg-image ruleset.

4.

Inside the newly created ruleset add a filter property and set its value to be the saturate() function. Set the function’s argument to be 0.2 and then hover over the card to see that change!

Take a look at the saturate() function’s documentation for more information on how it operates.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?