Overview
Although CSS filters can only show results in IE browsers, they are still a good way to add special effects to webpages.
1.CSS static filter Style)
How to Use CSS static filter styles: {filter: filtername (parameters1, parameters2 ,...)}
Filter style Brief description of supported Parameters
Alpha sets the opacity of an image or text, opacity, finishopacity, style, startx, starty, finishx, finishy, add, ction, strength
Blur produces dynamic blur effects in the specified direction and position: add, direction, strength
Chroma transparently processes the selected color.
Dropshadow generates shadows such as color, offx, offy, and positive in the specified direction and position.
Fliph flipped objects horizontally
Flipv flipped objects along the vertical direction
Glow emits color and strength light around the object.
Gray processes the object in grayscale Mode
Invert reversed object color
Light simulates illumination of Objects
Mask generates mask color for the object
Shadow shadows along the edge of the object. Color and ction
Wave generates sine waves such as ADD, freq, lightstrength, phase, and strength in the vertical direction.
Xray changes the color depth of an object and creates a black/white image.
The above is all the content of the static filter. It should be noted that CSS is case sensitive!
2.CSS Dynamic Filter
A dynamic filter can add a moving fade-in and fade-out effect and an image conversion effect to a page. It can be divided into two types: Blend and reveal. The former can gradually disappear or appear an object, the latter provides 24 types of image conversion effects. To call a dynamic filter, remove the filter type and parameters that need to be defined in the static filter, and control its status using the script language.
First, you need to apply the dynamic effect before starting a dynamic effect, and then play the dynamic effect. In the dynamic effect, you can also stop the dynamic effect ), the above can be implemented using the following method:
Object Name. filters (filter value). Apply ()
Object Name. filters (filter value). Play ()
Object Name. filters (filter value). Stop ()
You can use the object name to determine the filter status. filters (filter value ). status. If the value is 0, the filter is not executed. If the value is 1, the filter is completed. If the value is 2, the filter is in progress. When defining a filter, as mentioned above, there can be a mixture ("filter: blendtrans (duration = Time Value)", duration indicates the time required for the filter mirror execution, in seconds) and display ("filter: revealtrans (duration = Time Value, transition = transition type)", transition type is a value from 0 to 23.
Filters are not officially recognized by W3C. Filters are only part of Microsoft Internet Explorer and cannot be used in Netscape browsers. Organizations that set standards are currently under discussion, but no final conclusion has been reached. In my opinion, filters are a very interesting and essential part of creating brilliant visual effects. Filters save bandwidth, and you can use the text format when creating a wonderful visual design, instead of creating a large text bitmap to achieve the same effect. However, since these features have not yet become an official part of HTML, not all browsers can see these features. Sometimes, you have to consider making the same effect in a traditional way. Of course, you have to continue to plug a huge GIF file into the webpage.
Instance description
Nowadays, many of my friends are engaged in personal webpages, which are colorful and distinctive. However, many of my friends put a large image on the page, making page download very slow, when animated in GIF format is used, although the animated in GIF format is slim, it is not very cost-effective. Is it possible to make the page lively without special images or animated GIF formats? Yes, but Javascript is more difficult for beginners. Today, I will use revealtrans and filters in the heavyweight command attribute "style" contained in IE to create new ideas! It is hoped that netizens can use these filters and page switching effects flexibly to bring their home pages into full play! Keep improving!
The style attribute can be applied to tags, more available and widely used in <Table> <tr> <TD> <body> <center> <input> <font> <form> <frame> <label> <Map> tag, more importantly, it is available in labels.
Page switching effect:
Add "" between the front and end of the page ""
Note: Duration indicates the duration of page switching. 3.000 indicates 3 seconds. Generally, you can enter 3 directly. Transition indicates the switching effect. 22 different switching effects are available from 1 to 23, among them, 23 is the random effect.
Filter effect:
More filters are used in Photoshop. use filters to create new ideas on the page!
Syntax: filter: filtername (fparameter1, fparameter2 ...)
(Filtername indicates the Filter Name. fparameter1 and fparameter2 are filter parameters)
Filter description:
ALPHA: set the transparency level.
Blur: Creates a high-speed mobile effect, that is, a blur effect.
Chroma: Make special colors transparent.
Dropshadow: Creates a fixed shadow of an object.
Fliph: Create a horizontal image.
Flipv: Create a vertical image.
Glow: glow outside the edge of a nearby object.
Gray: grayscale the image.
Invert: reversed.
Light: Creates a light source on an object.
Mask: Creates a transparent mask on the object.
Shadow: Creates a fixed offset shadow.
Wave: ripple effect.
Xray: changes an object like X-rays.
1. filter: Alpha
Syntax: filter: alpha (opacity = opacity, finishopacity = finishopacity, sty le = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy)
Note:
Opacity: start value. value range: 0 ~ 100, 0 is transparent, and 100 is the source image.
Finishopacity: target value.
Style: 1, 2, or 3
Startx: any value
Starty: any value
Example: filter: alpha (opacity = "0", finishopacity = "75", 2)
2. filter: blur
Syntax: filter: blur (add = add, direction = direction, strength = strength)
Note:
Add: generally 1, or 0.
Direction: angle, 0 ~ 315 degrees. The step size is 45 degrees.
Strength: the number of results that increase, generally 5.
Example: filter: blur (add = "1", direction = "45", strength = "5 ")
3. filter: chroma
Syntax: filter: chroma (color = color)
Note: Color: # rrggbb format, any.
Example: filter: chroma (color = "# ffffff ")
4. filter: dropshadow
Syntax: filter: dropshadow (color = color, offx = offx, offy = offy, positive = positive)
Note: Color: # rrggbb format, any.
Offx: returns the offset of the X axis.
Offy: Y-axis deviation value.
Positive: 1 or 0.
Example: filter: dropshadow (color = "# 6699cc", offx = "5", offy = "5", positive = "1 ")
5. filter: fliph
Syntax: filter: fliph
Example: filter: fliph
6. filter: flipv
Syntax: filter: flipv
Example: filter: flipv
7. filter: glow
Syntax: filter: glow (color = color, strength = strength)
Note:
Color: Luminous color.
Strength: intensity (0-100)
Example: filter: glow (color = "# 6699cc", strength = "5 ")
8. filter: Gray
Syntax: filter: Gray
Example: filter: Gray
9. filter: Invert
Syntax: filter: Invert
Example: filter: Invert
10. filter: mask
Syntax: filter: mask (color = color)
Example: filter: mask (color = "# ffffe0 ")
11. filter: Shadow
Syntax: filter: Shadow (color = color, direction = direction)
Note:
Color: # rrggbb format.
Direction: angle, 0-degrees, step size: 45 degrees.
Example: filter: Shadow (color = "# 6699cc", direction = "135 ")
12. filter: Wave
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 ")
13. filter: Xray
Syntax: filter: Xray
Example: filter: Xray;
14. color change
Syntax: filter: progid: DXImageTransform. Microsoft. gradient (gradienttype = 0, startcolorstr = "# b5ccfa", endcolorstr = "# b5ccfa ");
Basic CSS text filter effects
1 ,:
| All the way sunshine |
| All the way sunshine |
All the way sunshine |
All the way sunshine |
All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
Sunny |
Sunny |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
| All the way sunshine |
2. Code lines.
<Table border = 1 style = "border-style: solid; border-width: 1; font-size = 12px" width = "520">Color = #8c96b5 size = 6> <B> sunshine all the way </B> </font> </TD>
</Tr>
<Tr>
<TD style = "filter: glow (strength = 1) mask (color = # b4bbcf) chroma (color = # b4bbcf) "align =" center "Height = 54> <font color = #8c96b5 size = 6> <B> all the way to sunshine </B> </font> </TD>
</Tr>
<Tr>
<TD> <span style = "position: absolute; font-size: 30pt; color = blue; filter: fliph"> all sunshine </span> </TD>
</Tr>
<Tr>
<TD> <span style = "position: absolute; left: 200; font-size: 30pt; color = blue; filter: flipv "> sunshine all the way </span> </TD>
</Tr>
</Table>
<Table align = center background = "http://www.idc2008.com/468X60-8.gif" border = 0>
<Tr>
<TD style = "filter: glow (strength = 4) mask (color = # e1e4ec) "> <font size =" 7 "> <B> all the way to sunshine </B> </font> </TD>
</Tr>
</Table>
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
