Several basic CSS text filter effects

css| filter Free to do nothing, to organize some CSS text effects, to beginners. Here's an example, which is the most basic filter application, in fact, the combination of two or several different filters will get unexpected results, encounter problems oneself more hands-on try on OK, of course, pay special attention to color collocation, sometimes with color is not good to see the effect, with the background picture application will have very good effect. Because is too lazy, so did not write the annotation also did not write any grammar format, own look! Hey. (I don't know, don't yell at me)

1, the effect chart:

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

SUNNY

SUNNY

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

All the way to the sun

2, source code

<table border=1 style= "border-style:solid; border-width:1;font-size=12px "width=" 520 ">
<tr>
&LT;TD width= "510" >
<span style= "Font-size:30pt;display:block;
Text-align:center;color:blue;
Filter:glow (color=red,strength=10); Height:1 "> Sunshine </span></td>
</tr>
<tr>
&LT;TD width= "510" >
<span style= "Font-size:30pt;display:block;
Text-align:center;color:darkblue;
Filter:blur (add=t,direction=135,strength=10); Height:1 "> Sunshine </span></td>
</tr>
<tr>
&LT;TD width= "510" >
<div style= "Color:red;font-size:25pt;height:1;display:block;
Filter:progid:DXImageTransform.Microsoft.motionblur (strength=30,add=1,direction=135) ">
<p align= "center" > Sunshine </div></td>
</tr>
<tr>
&LT;TD width= "510" >
<div style= "height:1;width:100%;
Font-family:impact;font-size:30pt;color:navy;display:block;
Filter:progid:DXImageTransform.Microsoft.wave (strength=3) ">
<p align= "center" > Sunshine </div></td>
</tr>
<tr>
&LT;TD width= "510" >
<div style= "height:1;width:100%;
Font-family:impact;font-size:30pt;color:navy;display:block;
Filter:progid:DXImageTransform.Microsoft.wave (strength=3,freq=5) ">
<p align= "center" > Sunshine </div></td>
</tr>
<tr>
&LT;TD width= "510" >
<span style= "Font-size:30pt;display:block;
Text-align:center;color:darkblue;
Filter:wave (add=t,freq=5,lightstrength=5,phase=0,strength=5);
Height:1 "> Sunshine </span></td>
</tr>
<tr>
&LT;TD width= "510" >
<span style= "Font-size:30pt;display:block;
Text-align:center;color:darkblue;
Filter:shadow (color=blue); Height:1 "> Sunshine </span></td>
</tr>
<tr>
&LT;TD width= "510" >
<div align= "center" style= "HEIGHT:1;FONT-SIZE:30PT;
Filter:dropshadow (color=maroon,positive=1); " > Sunshine </div></td>
</tr>
<tr>
&LT;TD width= "510" >
<div align= "center" style= "HEIGHT:1;FONT-SIZE:30PT;
Filter:dropshadow (color=maroon,positive=0); " > Sunshine </div></td>
</tr>
<tr>
&LT;TD width= "510" >
<div style= "Filter:progid:DXImageTransform.Microsoft.engrave (bias=0.5);
Height:1;font-size:20pt;font-family:impact;background-color:blue ">
<p align= "center" >SUNNY</div></td>
</tr>
<tr>
&LT;TD width= "510" >
<div style= "Filter:progid:DXImageTransform.Microsoft.emboss (bias=0.5);
Height:1;font-family:impact;font-size:20pt;background-color:blue ">
<p align= "center" >SUNNY</div></td>
</tr>
<tr>
&LT;TD style= "Filter:mask (color= #E1E4EC) Shadow (color= #8C96B5, direction=135) chroma (color= #E1E4EC)" align= "center" ><font color= "Blue" size= "6" ><b> Sunshine </b></font></td>
</tr>
<tr>
&LT;TD style= "Filter:alpha (opacity=100,finishiopacity=0,style=1) Shadow (color=blue,direction=135)" align= "center" ><font color= "Blue" size= "6" ><b> Sunshine </b></font></td>
</tr>
<tr>
&LT;TD style= "Filter:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) chroma (color=# E1E4EC) "align=" center "><font color=" Blue "size=" 6 "><b> Sunshine </b></font></td>
</tr>
<tr>
&LT;TD style= "Filter:glow (color= #8C96B5, strength=2) Shadow (color= #B4BBCF, direction=135)" align= "Center" >< Font color= #E1E4EC size=6><b> Sunny </b></font></td>
</tr>
<tr>
&LT;TD style= "Filter:mask (color= #E1E4EC) Shadow (color= #B4BBCF, direction=135) chroma (color= #E1E4EC)" align= "center" ><font
color= #8C96B5 size=6><b> Sunshine </b></font></td>
</tr>
<tr>
&LT;TD style= "Filter:glow (strength=1) Mask (color= #B4BBCF) chroma (color= #B4BBCF)" align= "Center" height=54>< Font color= #8C96B5 size=6><b> Sunny </b></font></td>
</tr>
<tr>
<td><span style= "Position:absolute;font-size:30pt;color=blue;filter:fliph" > Sunshine &LT;/SPAN&GT;&LT;/TD >
</tr>
<tr>
<td><span style= "POSITION:ABSOLUTE;LEFT:200;FONT-SIZE:30PT;COLOR=BLUE;FILTER:FLIPV" > Sunshine </span ></td>
</tr>
</table>
<table align=center background= "Http://www.idc2008.com/468X60-8.gif" border=0>
<tr>
&LT;TD style= "Filter:glow (strength=4) Mask (color= #E1E4EC)" ><font size= "7" > <b> all the way Sunshine </b></ Font></td>
</tr>
</table>