CSS for shadow text effects _css/html
Last Update:2016-05-16
Source: Internet
Author: User
<style type= "Text/css" > <!--. title_1 {font-family: "Verdana"; font-size:12px; color: #E1E4EC; width:100%; fil Ter:dropshadow (color= #213C63, Offx=1, Offy=1)}. Text {font-family: "Verdana"; font-size:12px; line-height:16px; Color: #666699; Text-decoration:none}. unnamed1 {Filter:dropshadow (color= #FFFFFF, Offx=1, Offy=1)}--</style> <table wid Th= "border=" 0 "cellspacing=" 1 "cellpadding=" 0 "bgcolor=" #8C96B5 "align=" center "> <tr> <td bgcolor=" #F FFFFF "> <table bordercolordark= #ffffff width=" 100% "bordercolorlight= #000000 border=0 cellspacing=" 1 "Cellpa dding= "0" > <tr bgcolor= "#8C96B5" > <td colspan=2 bgcolor= "#8C96B5" width= "100%" height= "+" > ...:: Skillfully use CSS to create WordArt::.. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > & Lt;table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <TD class= "Text" > If you have the flexibility to apply the features and combinations of CSS filters, we can get a lot of unexpected results. This is a demonstration of some effects for your reference. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > & Lt;table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "t Ext "> <table align=center border=0 width=" $ "height=" > <tr> <td style= "Filte R:blur (direction=135,strength=8) "align=" center "><b><i>e Flow design </i></b></td> </ Tr> </table> effect with blur filter, code 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= "unnamed1" > <tr> <td class= " Text "> <table align=center border=0 width=" "height="; <tr> <td style= "Filter:dropshadow (color= #B4BBCF, offx=6,offy=6,positive=1)" align= "Center" ><b>& Lt;i>e Flow Design </i></b></td> </tr> </table> effects with DropShadow filters, the code is as follows: <b>filter:dropshadow (color= #B4BBCF, offx=6,offy=6,positive=1) </b></td> </tr> </tab le> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellsp Acing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "text" > <table align=center border=0 width= "height=" > <tr> <td style= "Filter:glow (color= #B4BBCF, strength=5)" Alig n= "Center" ><b><i>e Flow design </i></b></td> </tr> </table> with The Glow filter makes the following code: <b>filter:glow (color= #B4BBCF, strength=5) </b></td> </tr> </table > </td&Gt </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= "H" eight= "> <tr> <td style=" Filter:alpha (opacity=100,finishiopacity=0,style=1) Shadow (color= #8 c96b5,direction=135) "align=" center "><b><i>e Flow design </i></b></td> </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> </table> </td> </tr& Gt <tr> <td bgcolor= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "un Named1 "> <tr> <td class=" text "> <table align=center border=0 width=" $ "height=" ; <tr> <td style= "Filter:mask (color= #E1E4EC) Shadow (color= #8C96B5, direction=135) chroma (color= #E1E4EC)" align= "C Enter "><b><i>e Flow design </i></b></td> </tr> </table> This effect also Use two filter masks and shadow, the code is as follows: <b>filter:mask (color= #E1E4EC) Shadow (color= #8C96B5, direction=135) chroma (color=# E1E4EC) </b> Note: The color of the mask is consistent with the background color of the page, and the color of the font is determined by shadow. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > & Lt;table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr> <td class= "t Ext "> <table align=center border=0 width=" $ "height=" > <tr> <td style= "Filte R:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) chroma (color= #E1E4EC) "align=" center " ><b><i>e Flow design </i></b></td> </tr> </tabLe> If the above effect is engraved, then this effect should be considered emboss, with two filters to achieve mask and DropShadow, pay attention to the color of the mask and the background color of the Web page, or the mask and chroma into pairs to use, but also achieve the same effect. The code is as follows: <b>filter:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) chroma (c olor= #E1E4EC) "</b> </td> </tr> </table> </td> </tr> <tr> <td BG Color= "#E1E4EC" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" class= "unnamed1" > <tr& Gt <TD class= "text" > <table align=center border=0 width= "$" height= "> <tr> < TD style= "Filter:glow (color= #8C96B5, strength=2) Shadow (color= #B4BBCF, direction=135)" align= "Center" ><b> <i>e Flow Design </i></b></td> </tr> </table> Use glow filters to make hollow words by setting the font color As the background color, and then set the value of the strenght of the glow filter 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" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" > <tr> <td class= "text" > <table height=150 width=200 align=center background= "http://www.e-flowing.com/1/bg_1.jpg" border=0> &L t;tr> <td style= "Filter:mask (color= #E1E4EC) Shadow (color= #B4BBCF, direction=135) chroma (color= #E1E4EC)" Align = "Center" ><b><i>e Flow design </i></b></td> </tr> </table> <table height=150 width=200 align=center background= "http://www.e-flowing.com/1/bg_2.jpg" Border=0> < tr> <td style= "Filter:glow (strength=1) Mask (color= #B4BBCF) chroma (color= #B4BBCF)" align= "Center" HEIGHT=54&G T;<b><i>e Flow Design </i></b></td> </tr> </table> <ta ble height=150 width=200 Align=center background= "http://www.e-flowing.com/1/bg_3.jpg" border=0> <tr> <td style= "Filte R:mask (color= #E1E4EC) DropShadow (color= #B4BBCF, offx=-3,offy=-3,positive=1) chroma (color= #E1E4EC) "align=" center " Height=54><b><i>e Flow Design </i></b></td> </tr> </table> </td> ; </tr> <tr> <td class= "unnamed1" > If the background uses a picture, in order to achieve satisfactory results need to use mask and chroma combination, this can make the font feel is transparent, let the background out. The previous code for the effect listed above is: <b>filter:mask (color= #E1E4EC) Shadow (color= #B4BBCF, direction=135) chroma (color= #E1E 4EC) </b> Note: Font color is determined by 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 of the Yan 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 by DRopshadow decided. </td> </tr> </table> </td> </tr> <tr> <td bgcolor= "#E1E4EC" > & Lt;table width= "100%" border= "0" cellspacing= "8" cellpadding= "0" > <tr> <td class= "text" > & Lt;table height=150 cellspacing=0 cellpadding=0 width=480 align=center background= "http://www.e-flowing.com/1/bg_1. JPG "border=0> <tr> <td style=" Filter:glow (strength=4) Mask (color= #E1E4EC) "height=109 align=" Center "valign=" Middle "><i><b>welcome to </i></td>" target=_blank>www. e-flowing.com</b></i></td> </tr> </table> </td> </tr> <tr> <td class= "unnamed1" > Code for this effect: <b>filter:glow (strength=4) Mask (color= #E1E4EC) </b>& lt;/td> </tr> </table> </td> </tr> </table>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]