Loading lesson path
filter property is used to add visual effects (like blur and saturation) to elements. Within the filter property, you can use the following CSS functions: blur() brightness() contrast()
Formula
drop - shadow()grayscale()
Formula
hue - rotate()invert() opacity() saturate() sepia()
filter function applies a blur effect to an element. A larger value will create more blur. If no value is specified, 0 is used (no effect).
Formula
Apply different blur effects to < img > elements:#img1 {filter:
blur(2px);
}
#img2 {
filter: blur(6px);
}filter function adjusts the brightness of an element. 100% is default, and represents the original brightness
0% will make the image completely black
Make an image brighter and darker than the original:
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}filter function adjusts the contrast of an element. 100% is default, and represents the original contrast
0% will make the image completely gray
Increase and decrease the contrast for an image:
#img1 {
filter: contrast(150%);
}
#img2 {filter:
contrast(50%);
}Formula
filter function applies a drop - shadow effect to an image.Formula
Add different drop - shadow effects to an image:#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}filter function converts an image to grayscale. 100% (or 1) will make the image completely grayscale 0% (or 0) will have no effect
Set various grayscale for an image:
#img1 {
filter: grayscale(1);
}
#img2 {filter:
grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
}filter function applies a color rotation to an element. This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image.
Set various color rotations for an image:
#img1 {
filter: hue-rotate(200deg);
}
#img2 {filter:
hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}