Home > Developer > Web Develop
CSS + DIV webpage style and layout-filter and cssdiv style filter
Filters are mainly used to achieve various special effects of images. It plays an amazing role in PhotoShop. The identifier of the CSS filter is "filter", which is the same as that of other css statements. Css filters can be divided into two types: Basic filters and advanced filters. Css filters apply directly to objects and take effect immediately. To use JavaScript and other scripting languages to produce more changing effects, it becomes an advanced filter.
1. Common Filters
(1) Transparency Filter
AlphaChannel: Used to set transparency.
Its Expression is as follows:
Filter: alpha (opacity = opacity, finishopacity = finishopacity, style = style, startX = startX, startY = startY, finishX = finishY)
Opacity indicates transparency registration. Optional values: 1-100. 0 indicates full transparency, and indicates full opacity. The Style parameter specifies the shape features of the transparent area. 0 represents a uniform shape; 1 represents a linear shape; 2 represents a radial shape; 3 represents a rectangle. StartX and StartY represent the starting coordinates of the gradient transparency effect, and finishX and finishY represent the ending coordinates of the gradient transparency effect.
For example, set the transparency of 50%.
<style>.alpha{filter:alpha(opacity=50,style=2,startX=500,startY=20,finishX=530,finishY=50);}</style><body> </body>
Blur filter: User-Defined Blur
Expression: blur (pixelradius = 4, makeshadow = false) Where pixelradius sets the degree of blur.
For example, set the blur effect.
<style>.blur{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}</style><body> </body>
Chroma filter:
You can use the "Chroma" attribute to set the COLOR specified in an object to transparent. The parameter COLOR is the COLOR to be transparent.
Syntax: {filter: chroma (color = color )}
For example, filter the golden color of a tiger.
<Style>. chroma {filter: chroma (color = FF6800 ); /* remove the golden color */} </style> <body> </body>
Effect:
Mask filter:
Syntax: {filter: mask (color = color )}
You can use the 'mask' attribute to create a film covering the surface of the object. The effect is the same as that of the wearing colored glasses.
Example:
<Style>. mask {filter: mask (color = # 8888FF ); /* mask effect */} </style> <body> </body>
Effect:
(2) Shape
Flip
Flip:Syntax: STYLE = "filter: fliphflipv". fliph indicates horizontal flip. flipv indicates vertical flip.
For example, perform a symmetric horizontal vertical flip.
<Style>. flip1 {filter: fliph;/* horizontal flip */}. flip2 {filter: flipv;/* vertical flip */}. flip3 {filter: flipv fliph; /* flip horizontally and vertically */} </style> <body> <br> </body>
Effect:
Waves
Syntax: filter: Wave (Add = add, Freq = freq, LightStrength = strength, Phase = phase, Strength = strength)
Note:
Add: generally 1, or 0.
Freq: deformation value.
LightStrength: Deformation percentage.
Phase: angular deformation percentage.
Strength: deformation Strength.
Example: filter: wave (Add = "0", Phase = "4", Freq = "5", LightStrength = "5", Strength = "2 ")
(3) Other filters
Shadow Filter
Syntax: {filter: shadow (color = color, direction = direction )}
You can use the "Shadow" attribute to create an object projection in the specified DIRECTION. COLOR is the projection COLOR, and DIRECTION is the projection DIRECTION. Where 0 degrees indicates vertical up, and then every 45 degrees is a unit. The default value is 270 degrees to the left.
Gray, Invert, Xray Filters
Syntax: {filter: gray}, {filter: invert}, {filter: xray}
The Gray filter turns an image into a grayscale image. (after the Wenchuan earthquake, many websites become grayed out, which is implemented using this code)
Invert filters flip all the visual attributes of an object, including the color, saturation, and brightness values;
The Xray filter allows an object to reflect its outlines and highlight these outlines, the so-called "X" films.
Glow filter
Syntax: {filter: glow (color = color, strength )}
When the 'glow' attribute is used for an object, the edge of the object will produce a similar luminous effect. "COLOR" indicates the COLOR of light, and "STRENGTH" indicates the intensity. You can specify the intensity from any integer between 1 and 255.
(4) more filters:
Chroma: sets the specified color to transparent.
DropShadow: creates an offset image profile, that is, a projection shadow.
Grayscale: reduces the color of an image.
Invert: Completely Invert the color, saturation, and brightness values to create a negative effect.
Light: Light Projection on an object
In fact, CSS filters are not applicable to all browsers. Many filters have certain compatibility browser limitations. However, the effect of the filter is to make our webpage images more effective. To use the filter right, in addition to the ordinary art skills, we also need a certain degree of familiarity and control capabilities, you must have a wealth of imagination. In this way, we can apply filters to make full use of our artistic talents.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
