CSS for 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%; 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> &LT;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&gt ;</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> &lt ;/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 &LT;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&gt ; </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]
  • 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.