The best CSS3 filter (filter) properties Tutorial In 2024, In this tutorial you can learn Definitions and use,Browser Support,CSS Syntax,Filter function,More examples,related articles,
Edit all colors to black and white pictures (100% gray):
filter attribute defines the elements (typically <img>) visual effects (for example: Fuzzy and saturation).
Defaults: | none |
---|---|
inherit: | no |
Animation support: | Yes. Details can be found in CSS Animation |
version: | CSS3 |
JavaScript syntax: | object .style.WebkitFilter = "grayscale (100%)" to try >> |
Figures in the table represent the first browser to support the method version number.
Immediately after the number for the specified browser -webkit- prefix.
Attributes | |||||
---|---|---|---|---|---|
filter | 18.0 -webkit- | not support | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
Note: Older Internet Explorer browser (4.0 to 8.0) to support non-standard "filter" property has been abandoned. IE8 and earlier browsers often use opacity property.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tip: Use spaces to separate multiple filters.
Note: Filters typically use percentage (eg: 75%), of course, can also be used to represent a decimal (eg: 0.75).
Filter | description |
---|---|
none | The default value, no effect. |
blur (px) | Gaussian blur to the image settings. "Radius" to set a value standard Gaussian function is poor, or the number of pixels on the screen to melt together, so the greater the value the more blurred; If the value is not set, the default is 0; this parameter can be set css length value, but does not accept percentage values. |
brightness (%) | Application of a linear multiplication to the picture to make it look brighter or darker. If the value is 0%, the image is all black. Value is 100%, no change in the image. Other values correspond to linear multiplier effect. Value of more than 100% are possible, the image will be brighter than the original. If the value is not set, the default is 1. |
contrast (%) | Adjust the contrast of the image. Value is 0%, the image is all black. Value is 100%, the image unchanged. Values can exceed 100%, which means will use a lower contrast. If the value is not set, the default is 1. |
drop-shadow (h-shadow v -shadow blur spread color) | Set up a shadow effect to the image. Shadows are synthesized in the image below, there may be ambiguity, a specific color can draw the diagram mask offset version. Function accepts <shadow> value (defined in the CSS3 background) type, in addition to "inset" keyword is not allowed. The function with the existing box-shadow box-shadow property is very similar; except that, through the filter, some browsers for better performance provides hardware acceleration.
|
grayscale (%) | Convert the image to grayscale. It defines the value of the conversion ratio. Value of 100% is completely converted to a grayscale image, a value of 0% of the image unchanged. Values between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0; |
hue-rotate (deg) | Application to the image hue rotation. "Angle" color ring angle image is a set value adjusted value. Value 0deg, the image change. If the value is not set, the default value is 0deg. Although there is no maximum value that exceeds the value of the equivalent of another perimeter 360deg. |
invert (%) | Inverting input image. It defines the value of the conversion ratio. 100% of the value is completely reversed. A value of 0%, the image unchanged. A value between 0% and 100%, the multiplier effect is linear. If the value is not set, the default value is 0. |
opacity (%) | Conversion degree of transparency of the image. It defines the value of the conversion ratio. 0% is completely transparent, and a value of 100%, the image unchanged. A value between 0% and 100%, the effect is linear multiplier, multiplied by the number of samples is also equivalent to the image. If the value is not set, the default value is 1. This function is very similar to the existing opacity property, except that through the filter, in order to improve the performance of some browsers will provide hardware acceleration. |
saturate (%) | Converts the image saturation. It defines the value of the conversion ratio. 0% is fully unsaturated, no change in the image is 100%. Other value, the multiplier effect is linear. More than 100% of the value is allowed, there is a higher saturation. If the value is not set, the default value is 1. |
sepia (%) | Convert the image to sepia. It defines the value of the conversion ratio. Value of 100% is entirely dark brown, is 0% of the image unchanged. Values between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0; |
url () | URL function takes an XML file, which sets a SVG filter, and may include an anchor to specify a specific filter element. E.g: filter: url(svg-url#element-id) |
initial | Property is set to default values, refer to: the CSS Initial Keyword |
inherit | This property is inherited from the parent element, you can see: the CSS the inherit keyword |
Photos Gaussian blur:
Make the picture brighter:
Adjust the contrast of the image:
Set up a shadow effect to the image:
Convert the image to grayscale:
Applications hue rotation to the image:
Inverting input image:
Conversion degree of transparency of the image:
Converting the image Saturation:
Convert images to sepia:
The use of multiple filters, each filter separated by spaces.
Note: The order is very important (for example, using grayscale () before using sepia () will produce a complete gray scale image).
The following example demonstrates how to use all the filter:
HTML DOM Reference: Style attributes the filter