Shulou(Shulou.com)06/02 Report--

This article will explain in detail whether CSS3 can support filters. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

CSS3 supports a variety of filters. In CSS3, you can use the filter attribute to add filter effects to elements, which have built-in filter functions: blur () setting blur filter, brightness () setting brightness filter, contrast () setting contrast filter, grayscale () setting grayscale filter, and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 supports many kinds of filters, and through the css3 filter filter property, we can create filter effects similar to photoshop. For example, blur effect, shadow effect, color filter effect and so on.

Filter describes blur (px) to set Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are blurred together on the screen, so the higher the value, the more blurred.

If no value is set, the default is 0; this parameter sets the css length value, but does not accept the percentage value. Brightness (%) applies a linear multiplication to the picture to make it look brighter or darker. If the value is 0%, the image will be all black. If the value is 100%, the image does not change. Other values correspond to the linear multiplier effect. A value of more than 100% is also possible, and the image will be brighter than before. If there is no set value, the default is 1. Contrast (%) adjusts the contrast of the image. If the value is 0%, the image will be all black. The value is 100%, and the image remains unchanged. The value can exceed 100%, which means a lower contrast will be used. If there is no set value, the default is 1. Drop-shadow (h-shadow v-shadow blur spread color)

Set a shadow effect to the image. Shadows are combined under the image, can be blurred, and can be drawn in a specific color as an offset version of the mask image. Function accepts (defined in the CSS3 background) a value of type, except for the "inset" keyword. This function is similar to the existing box-shadow box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance. The parameters are as follows:

(must)

These are the two values that set the shadow offset. Set the horizontal distance. A negative value causes the shadow to appear on the left side of the element. Set the vertical distance. Negative values cause shadows to appear above the element. Check out possible units.

If both values are 0, the shadow appears directly after the element (blurring if and/or is set).

(optional)

This is the third code > value. The higher the value and the more blurred the shadow becomes larger and lighter. Negative values are not allowed if not set, the default is 0 (the boundary of the shadow is sharp).

(optional)

This is the fourth value. Positive values make shadows expand and enlarge, while negative values make shadows shrink. If not set, the default is 0 (the shadow will be the same size as the element).

Note: Webkit and some other browsers do not support the fourth length and will not render if you add it.

(optional)

View possible keywords and tags for this value. If not set, the color value is based on the browser. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), the value of the colorcolor attribute is applied. In addition, if the color value is omitted, the shadow in WebKit is transparent.

Grayscale (%)

Converts an image to a grayscale image. Value defines the scale of the conversion. A value of 100% completely converts to a grayscale image, while a value of 0% does not change the image. A value between 0% and 100% is a linear multiplier of the effect. If not set, the default value is 0

Hue-rotate (deg)

Apply hue rotation to the image. The "angle" value sets the color ring angle at which the image will be adjusted. If the value is 0deg, the image does not change. If the value is not set, the default is 0deg. Although this value does not have a maximum value, a value that exceeds 360deg is equivalent to another circle.

Invert (%)

Reverses the input image. Value defines the scale of the conversion. 100% of the value is completely reversed. If the value is 0%, the image does not change. A value between 0% and 100% is a linear multiplier of the effect. If the value is not set, the default value is 0.

Opacity (%)

Converts the transparency of the image. Value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% means no change in the image. A value between 0% and 100% is a linear multiplier of the effect, which is also equivalent to the number of image samples multiplied by the number. If the value is not set, the default value is 1. This function is similar to the existing opacity property, except that through filter, some browsers provide hardware acceleration to improve performance.

Saturate (%)

Convert image saturation. Value defines the scale of the conversion. A value of 0% is completely unsaturated, and a value of 100% means no change in the image. Other values are linear multipliers of the effect. Values above 100% are allowed, and there is a higher saturation. If the value is not set, the default value is 1.

Sepia (%)

Converts the image to dark brown. Value defines the scale of the conversion. A value of 100% is completely dark brown, and a value of 0% does not change the image. A value between 0% and 100% is a linear multiplier of the effect. If not set, the default value is 0

Url ()

The URL function accepts a XML file that sets a SVG filter and can contain an anchor to specify a specific filter element.

For example:

Filter: url (svg-url#element-id)

Usage example

/ * use SVG filter * / filter: url ("filters.svg#filter-id"); / * use the filter function * / filter: blur (5px); filter: brightness (0.4); filter: contrast (200%); filter: drop-shadow (16px 16px 20px blue); filter: grayscale (50%); filter: hue-rotate (90deg); filter: invert (75%); filter: opacity (25%); filter: saturate (30%); filter: sepia (60%) / * multiple filter * / filter: contrast (175%) brightness (3%); / * do not use filter * / filter: none;/* global variable * / filter: inherit;filter: initial;filter: unset

This is the end of the article on whether CSS3 can support filters. I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.