Filter is mainly used in pictures to achieve some special effects. (although they can also be used in video), we only discuss the use of pictures.
-Webkit filter is an attribute of css3. Webkit takes the lead in supporting these functions. It feels that the effect is very good. Let's learn about the filter property.
Now the effects supported in the specification are:
- grayscale is a decimal value between 0-1
- sepia Brown is a decimal between 0-1
- saturate saturation value is num (numerical value)
- Hue rotate: angle (angle deg)
- invert is a decimal value between 0-1
- opacity transparency value is a decimal between 0-1
- brightness is a decimal value between 0-1
- contrast value is num
- Blur blur value is length (length unit: px)
- Drop shadow
grayscale
.filter{
width: 200px;
height: 200px;
filter: grayscale(0.5);
-webkit-filter: grayscale(0.5);
}
sepia Brown
.filter{
width: 200px;
height: 200px;
filter: sepia(0.5);
-webkit-filter: sepia(0.5);
}
. saturate saturation
.filter{
width: 200px;
height: 200px;
filter: saturate(2.1);
-webkit-filter: saturate(2.1);
}
Hue rotate
.filter{
width: 200px;
height: 200px;
filter: hue-rotate(60deg);
-webkit-filter: hue-rotate(60deg);
}
invert inverse
.filter{
width: 200px;
height: 200px;
filter: invert(0.3);
-webkit-filter: invert(0.3);
}
opacity transparency
.filter{
width: 200px;
height: 200px;
filter: opacity(0.5);
-webkit-filter: opacity(0.5);
}
brightness
.filter{
width: 200px;
height: 200px;
filter: opacity(2);
-webkit-filter: brightness(2);
}
contrast
.filter{
width: 200px;
height: 200px;
filter: contrast(2);
-webkit-filter: contrast(2);
}
**Blur blur**
.filter{
width: 200px;
height: 200px;
filter: blur(3px);
-webkit-filter: blur(3px);
}
Drop shadow
.filter{
width: 200px;
height: 200px;
filter: blur(3px);
-webkit-filter: drop-shadow(10px 20px 60px #000000);
}
