CSS Filters

Chapter: 72

CSS Filters

 

CSS Filters

The CSS filter property lets you apply graphical effects like blurring or color shifting to an element.
Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Image filtering is useful when you want to have different styling for the same image.
Instead of uploading multiple images to the website, you can upload only one image and then define visual effects using the filter property.

Filter functions include blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() and sepia().

Tap Continue to explore the filters and see them in action!

The filter property is not supported in Internet Explorer, Edge 12, Safari 5.1 and earlier.

CSS Filters

Which of the following is not a filter function?

invert

hue-rotate

contrast

inverse

The drop-shadow Function

drop-shadow(w h b c) creates a shadow effect that extends beyond an image for the width w and height h with blur b and color c.
w, h, and b are values in pixels.

For example:

.dropshadow {
filter: drop-shadow(5px 9px 2px blue);
}

CSS

Positive values create the shadow to the right and below the image.
Negative width and height values create the shadow above and to the left of the image.

Run the code and see how it works!

The drop-shadow Function

Fill in the blanks to create a red shadow.

.withshadow {

filter:

(5px 9px 2px red);

}

Chapter: 73

Filter Functions

The grayscale Function

The grayscale function converts an image to grayscale.
The only parameter defines the proportion of the conversion.

0% grayscale is the original image, whereas 100% makes the image completely grayscale.

Here is an example using a percentage value to make an image completely grayscale:

.filtered {
filter: grayscale(100%);
}

CSS

Any negative value leaves the image unchanged.

The grayscale Function

Fill in the blanks to apply the grayscale function.

.filtered {

:

(50%);

}

The sepia Function

The sepia function converts an image to sepia.
This is similar to using grayscale but with a reddish-brown color tone.

The idea behind sepia filters is that they can make black and white photos look a bit more eye-catching than the basic grayscale version.

0% sepia is the original image, whereas 100% converts the image to sepia completely:

.filtered {
filter: sepia(100%);
}

CSS

Run the code and see how it works!

The sepia Function

Fill in the blanks to create a valid sepia function.

.filtered {

:

(200%);

}

The saturate Function

The saturate function controls the color saturation for an image. The only parameter determines the proportion of the saturation that is applied to the image.
The parameter can be either a percentage value or a number.

0% creates a completely unsaturated image (grayscale), whereas 100% is the original image.

.filtered {
filter: saturate(50%);
}

CSS

Here is an example using a number value to make an image super-saturated

.filtered {
filter: saturate(2.5);
}

CSS

The saturate function also accepts values over 100%.

The hue-rotate Function

The hue-rotate function applies a hue rotation (based on the color circle) to an image.
The function takes an angle of rotation as its parameter. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.When you use hue-rotate() to rotate the hue, you are rotating around this color circle.

If the image contains red color, which is at 0 degrees on the color circle, rotating the hue by 240deg will make the red color blue.

Here is an example of a hue rotation:

.filtered {
filter: hue-rotate(180deg);
}

CSS

0 and 360deg rotations leave the image unchanged.

Run the code and see how it works!

The hue-rotate Function

Rotating the hue by 120deg will make the red color in an image:

yellow

red

blue

green

The invert Function

The invert function inverts the colors of an image to make dark areas bright and bright areas dark.
The function takes the proportion of the conversion as its parameter.

The parameter can be either a percentage value or a number.
0%invert leaves the image unchanged, whereas 100% creates a completely inverted image that is similar to a photographic negative.

Here is an example using a percentage value to make the image partially inverted:

.filtered {
filter: invert(70%);
}

CSS

The specification allows values over 100%, but that will have no further effect on the image.

Chapter: 74

Opacity and Brightness

The opacity Function

The opacity function sets the opacity of an image to change its transparency.

0% opacity creates a completely transparent image, whereas 100% is the original image.

For example:

.filtered {
filter: opacity(70%);
}

CSS

Run the code and see how it works!

The brightness Function

The brightness(amount) function adjusts the brightness of an image, making it appear brighter or darker.
The amount parameter determines the brightness level of the image. The parameter can take either a percentage value or a number.

A value of 0% results in an image that is completely black.
A value of 100% results in an image that is unchanged.
Any amount over 100% produces a brighter image.

Here is an example using a percentage value to make the image darker:

.filtered {
filter: brightness(50%);
}

CSS

A value under 100% darkens the image, while a value over 100% brightens it.

A number value of 0.5 has the same effect as the percentage value of 50%. A value of 1 is the same as 100%.

Here is an example using a number value to make the image brighter:

.filtered {
filter: brightness(1.9);
}

CSS

Any negative value will make the image black.

The brightness Function

Fill in the blanks to make an image brighter and circled.

.very_bright {

:

(150%);

border-

: 50%;

}

The contrast Function

The contrast function adjusts the contrast of the image.
The amount parameter can take either a percentage value or a number.

A value under100%decreases the contrast, while a value over 100% increases it.
A value of 0% will create an image that is completely gray, while a value of 100% leaves the image unchanged.
The value 0.5 corresponds to 50%, while 1 is the same as 100%.

Here is an example using a percentage value to give the image more contrast:

.filtered {
filter: contrast(140%);
}

CSS

Any negative value leaves the image unchanged.

The contrast Function

Fill in the blanks to make an image completely gray.

#my_image .gray_effect {

filter:

(0%);

width: 150px;

The blur Function

The blur function applies a blur effect to an image.
The blur function has only one parameter, radius, which defines how many pixels on the screen blend into each other. (a larger value creates more blur).

For example:

.blured {
filter: blur(5px);
}

CSS

The parameter is specified as a CSS length, but does not accept percentage values.

If no parameter is provided, then the default value 0 is used, which leaves the image unchanged.

For example:

.blur {
/* Both have no effect on the picture*/
blur(); /* If no parameter is provided, then a value 0 is used.*/
blur(0); /* A value of 0 leaves the input unchanged.*/
}

CSS

Run the code and see how it works!

The blur Function

Fill in the blanks to apply a blur effect.

#my_image .glitchy {

border: solid 1px black;

:

(5px);

}

Chapter: 75

Using Multiple CSS Filters

Using Multiple CSS Filters

Multiple CSS filters can be used together by separating them with spaces.
The following code demonstrates the use of the blur and the hue-rotate functions:

.filtered {
filter: blur(5px) hue-rotate(180deg);
}

CSS

Another Example:

.filtered {
filter: saturate(30%) drop-shadow(5px 9px 2px gray) blur(1px);
}

CSS

Another example from the 19th century:

.filtered {
filter: brightness(150%) sepia(100%);
}

CSS

Run the code and see how it works!

Using Multiple CSS Filters

Fill in the blanks to make an image circled and blurred with a gray shadow.

#avatar .deactivated {

filter: saturate(30%)

(5px 9px 2px gray)

(1px);

border-radius:

%;

}

Chapter: 76

Module 8 Quiz

Which of the following is a filter function?

shadow

rotate

invert

light

Fill in the blanks to adjust the brightness of an image to 110% and apply a blur effect to it.

.filtered {

filter:

(5px) brightness(

%);

}

Fill in the blanks to make the image circled and blurred with 30% sepia applied.

img {

-radius: 50%;

filter:

(30%)

drop-shadow(5px 9px 2px red)

(1px);

width: 100px;

height: 100px;

}