CSS to implement shadow text effects _css/html

Source: Internet
Author: User
<style type= "Text/css" > <!--. title_1 {font-family: "Verdana"; font-size:12px; color: #E1E4EC; width:100%; f Ilter:dropshadow (color= #213C63, Offx=1, Offy=1)}. Text {font-family: "Verdana"; font-size:12px; line-height:16px; col Or: #666699; Text-decoration:none}. unnamed1 {Filter:dropshadow (color= #FFFFFF, Offx=1, Offy=1)}--> </style> <table Width= "border=" 0 "cellspacing=" 1 "cellpadding=" 0 "bgcolor=" #8C96B5 "align=" center "> <tr> <td Bgcolo R= "#FFFFFF" > <table bordercolordark= #ffffff width= "100%" bordercolorlight= #000000 border=0 cellspacing= "1" cellpadding= "0" > <tr bgcolor= "#8C96B5" > <td colspan=2 bgcolor= "#8C96B5" width= "100%" height= "16" & Gt <div align= "center" class= "Title_1";:: Skillfully use CSS to make WordArt::. </div> </td> </tr> </table> </td> </tr> <tr> <td BG Color= "#E1E4EC" > <table width= "100%" border= "0"Cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > if the features of CSS filters are applied flexibly and combined, I They can get a lot of unexpected results. This is a number of effect demonstrations for your reference. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > <table align=center border=0 width= "" height= "a" > <tr> <td align= "center" ><font face= "blackbody" color= "#8C96B5" size= "6" ><b><i>e Stream design </i></b></ font></td> </tr> </table> effects with blur filters, the code is as follows: <b>filter: Blur (direction=135,strength=8) </b></td> </tr> </table> </td> </tr> ;tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "Unn AmeD1 "> <tr> <td class=" text > <table align=center border=0 width= "" height= "" > <tr> <td align= "center" ><font face= "bold" color= "#8C96B5" size= "6" ><b><i>e Flow design </i></b></font></td> </tr> </table> with DropShadow filters Effect, the code is as follows: <b>filter:dropshadow (color= #B4BBCF, offx=6,offy=6,positive=1) </b></td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" Border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > &L T;table align=center border=0 width= "height=" > <tr> <td align= "center" ><font Face= "Bold" color= "#8C96B5" size= "6" ><b><i>e Flow design </i></b></font></td> </tr& Gt </table> With the Glow filter effect, the code is as follows: <b>filter:glow (color= #B4BBCF, strength=5) </b></td> < /tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width = "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > <table align=center border=0 width= "height=" > <tr> <td align= "center" &GT;&L T;font face= "Bold" color= "#8C96B5" size= "6" ><b><i>e stream design </i></b></font></td> &L T;/tr> </table> This effect uses two kinds of filters: Shadow and Alpha, the code is as follows: <b>filter:alpha (opacity=100, finishiopacity=0,style=1) Shadow (color= #8C96B5, direction=135) </b> </td> </tr> </tabl e> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" ce Llspacing= "8" Cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > <table align=center border=0 width= "2 "Height=" > <tr> <td align= "center" ><font face= "blackbody" color= "#8C96B5" size= "6" > <b><i>e Flow design </i></b></font></td> </tr> </table> This effect also uses two filters mask and shadow, the code is as follows: <b>filter:mask (color= #E1E4EC) Shadow (color= #8C96B5, direction=135) ch Roma (color= #E1E4EC) </b> Note: Mask color to match the background color of the page, the color of the font is determined by shadow. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > <table align=center border=0 width= "" height= "a" > <tr> <td align= "center" ><font face= "bold" color= "#8C96B5" size= "6" &GT;<b><i>e Flow design </i></b></font></td> </tr> </table> If the above effect is engraved, then this effect should be embossed, with two filters to achieve mask and DropShadow, pay attention to mask color and Web page background color consistent, or mask and chroma into use, can achieve the same effect. The code is as follows: <b>filter:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) ch Roma (color= #E1E4EC) "</b> </td> </tr> </table> </td> </tr> <tr> &LT;TD bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" ; <tr> <td class= "text" > <table align=center border=0 width= "" height= "" > < tr> <td align= "center" ><font face= "black Body" color= #E1E4EC size=6><b><i>e Stream Design </i>< /b></font></td> </tr> </table> Use glow filters to make hollow words by setting the font color to the background color, and then GL The strenght value of the OW filter is set to 1 or 2. The code for this effect is as follows: <b>filter:glow (color= #8C96B5, strength=2) Shadow (color= #B4BBCF, direction=135) </b> </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <ta ble width= "100%" border= "0" cellspacing= "8" cellpadding= "0" > <tr> <td class= "text" ; table height=150 width=200 align=center background= "yun_qi_img/bg_1.jpg" border=0> <tr> &LT;TD align= "center" ><font face= "blackbody" color= #8C96B5 size=6><b><i>e Stream Design </i></b>< /font></td> </tr> </table> <table height=150 width=200 Ali Gn=center background= "yun_qi_img/bg_2.jpg" border=0> <tr> <td align= "center" height=54>& Lt;font face= "blackbody" color= #8C96B5 size=6><b><i>e Flow design </i></b></font></td> </ Tr> </table> <table height=150 width=200 align=center background= "Yun_qi_img/bg_3.jpg" border=0> <tr> <td align= "center" Height=54><font face= "bold" color= #8C96B5 size=6><b><i>e Stream Set Count </i></b></font></td> </tr> </table> </td> </tr> <tr> <td class= "unnamed1" ><font class= "text" > if the background of the picture, in order to achieve satisfactory results need to use mask and chroma combination, so that the font feel is transparent, let the background through. The code listed above is: <b>filter:mask (color= #E1E4EC) Shadow (color= #B4BBCF, direction=135) chroma (color= #E1E4EC) & Lt;/b> Note: The color of the font determined by the shadow, mask and chroma color to be the same, color arbitrary. The middle code is: <b>filter:glow (strength=1) Mask (color= #B4BBCF) chroma (color= #B4BBCF) </b> Note: Mask and Chroma color is the same, this color determines the color of the font. The latter code is: <b>filter:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) chroma (color= #E1E4EC) </b> Note: Mask and chroma are the same color, color is determined by DropShadow. </font></td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" > <tr> <td CLA ss= "text" > <table height=150 cellspacing=0 cellpadding=0 width=480 align=center background= "yun_qi_img/bg_1. JPG "border=0> <tr> <td height=109 align=" center "valign=" middle "><font face=" Verdana "Color=" #8C96B5 "size=" 6 "><i><b>welcome to </i></font></td>" Targe T=_blank>www. e-flowing.com</b></i></font></td> </tr> </table> </td> </tr> <tr> <td class= "unnamed1" ><font class= "text" > code for this effect: <b>filter: Glow (strength=4) mask (color= #E1E4EC) </b></font></TD> </tr> </table> </td> </tr> </table>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.