Several basic CSS text filter effects _css/html

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.

<table border=1 width= "520" > <tr> <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> <td wi Dth= "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 "&G T All the way Sunshine </div></td> </tr> <tr> <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 "> All the way 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 "> All the Way Sunshine </div>& lt;/td> </tr> <tr> <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> <td width=" 510 "> <span style=" font-s Ize:30pt;display:block; Text-align:center;color:darkblue; Filter:shadow (color=blue); Height:1 "> Sunshine </span></td> </tr> <tr> <td width=" 510 "&G T <div align= "center" style= "height: 1;font-size:30pt; Filter:dropshadow (color=maroon,positive=1); " > Sunshine </div></td> </tr> <tr> <td width= "510" > <div align= "center" style= "he ight:1;font-size:30pt; Filter:dropshadow (color=maroon,positive=0); " > Sunshine </div></td> </tr> <tr> <td width= "510" > <div style= "Filter:progid:DXI MageTransform.Microsoft.engrave (bias=0.5); Height:1;font-size:20pt;font-family:impact;background-color:blue "> <p align=" center ">SUNNY</div>& lt;/td> </tr> <tr> <td width= "510" > <div style= "Filter:progid:DXImageTransform.Microso Ft.emboss (bias=0.5); Height:1;font-family:impact;font-size:20pt;background-color:blue "> <p align=" center ">SUNNY</div>& lt;/td> </tr> <tr> <td align= "center" ><font color= "Blue" size= "6" ><b> sunshine ;/b></font></td> </tr> <tr> &LT;TD align= "center" ><font color= "Blue" size= "6" ><b> all the way Sunshine </b></font></td> </tr > <tr> <td align= "center" ><font color= "Blue" size= "6" ><b> all the way Sunshine </b></font> </td> </tr> <tr> <td align= "center" ><font color= #E1E4EC size=6><b> Sunshine &L t;/b></font></td> </tr> <tr> <td align= "center" ><font color= #8C96B5 si Ze=6><b> Sunshine </b></font></td> </tr> <tr> <td align= "center" height=5 4><font color= #8C96B5 size=6><b> sunshine </b></font></td> </tr> <tr> &L T;td><span > Sunshine </span></td> </tr> <tr> <td><span > All the way Sunshine &LT;/SPAN&G t;</td> </tr> </table> <table align=center background= "Http://www.idc2008.com/468X60-8.gif" Bor Der=0> <tr> &LT;TD ><font size= "7" > <b> all the way Sunshine </b></font></td> </tr> </table>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]