Tip: you can modify some code before running
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Design the collection of artistic words with CSS (2)</title><STYLE type=text/css>. Title_1 {FONT-SIZE: 12px; FILTER: DropShadow (Color = #213C63, OffX = 1, OffY = 1); WIDTH: 100%; COLOR: # e1e4ec; FONT-FAMILY: "Verdana "}. text {FONT-SIZE: 12px; COLOR: #666699; LINE-HEIGHT: 16px; FONT-FAMILY: "Verdana"; TEXT-DECORATION: none }. unnamed1 {FILTER: DropShadow (Color = # FFFFFF, OffX = 1, OffY = 1 )}</sTYLE></head><body><TABLE cellSpacing=1 cellPadding=0 width=500 align=center bgColor=#8c96b5 border=0> <TBODY> <TR> <TD bgColor=#ffffff> <TABLE cellSpacing=1 borderColorDark=#ffffff cellPadding=0 width="100%" borderColorLight=#000000 border=0> <TBODY> <TR bgColor=#8c96b5> <TD width="100%" bgColor=#8c96b5 colSpan=2 height=16> <DIV class=title_1 align=center>...: Use CSS to make artistic words ::..</dIV></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text>If CSS filters are flexibly applied and combined, we can achieve many unexpected results. This is an example of the effect for your reference.</tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>The code is as follows:<BR><B>FILTER: blur (direction = 135, strength = 8)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>The code is as follows:<BR><B>FILTER: dropshadow (color = # B4BBCF, offx = 6, offy = 6, positive = 1)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>The code is as follows:<BR><B>FILTER: glow (color = # B4BBCF, strength = 5)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>Two filters are used for this effect: shadow and alpha. The code is as follows:<BR><B>FILTER: alpha (opacity = 100, finishiopacity = 0, style = 1)<BR>Shadow (color = #8C96B5, direcction = 135)</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>This effect also uses two filters, mask and shadow. The code is as follows:<BR><B>FILTER: mask (color = # E1E4EC)<BR>Shadow (color = #8C96B5, direction = 135) chroma (color = # E1E4EC)</b><BR><BR>Note: The mask color must be consistent with the webpage background color. The font color is determined by shadow.</tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>If the above effect is Yin Wen, the effect should be Yang Wen. Use two filters to implement mask and dropshadow. Note that the color of the mask must be the same as that of the webpage background color, alternatively, you can use mask and chroma in pairs to achieve the same effect. The code is as follows:<BR><B>FILTER: mask (color = # E1E4EC)<BR>Dropshadow (color = # B4BBCF, offx =-3, offy =-3, positive = 1)<BR>Chroma (color = # E1E4EC )"</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#e1e4ec size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR>You can use the glow filter to make hollow words. You can set the font color to the background color, and then set the strenght value of the glow filter to 1 or 2. The code for this effect is as follows:<BR><B>FILTER: glow (color = #8C96B5, strength = 2)<BR>Shadow (color = # B4BBCF, directive = 135)</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle height=54><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle height=54><FONT face=黑体 color=#8c96b5 size=6><B><I>ESTREAM design</i></b></fONT></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD class=unnamed1><FONT class=text>If the background uses images, you need to use mask and chroma in combination to achieve satisfactory results, so that the font can be transparent and the background can be transparent.<BR><BR>The code for the former effect listed above is:<BR><B>FILTER: mask (color = # E1E4EC)<BR>Shadow (color = # B4BBCF, directive = 135)<BR>Chroma (color = # E1E4EC)</b><BR>Note: the font color is determined by shadow. The colors of mask and chroma must be the same and the colors are arbitrary.<BR><BR>The intermediate code is:<BR><B>FILTER: glow (strength = 1)<BR>Mask (color = # B4BBCF)<BR>Chroma (color = # B4BBCF)</b><BR>Note: the mask and chroma colors are the same, which determines the font color.<BR><BR>The latter code is:<BR><B>FILTER: mask (color = # E1E4EC)<BR>Dropshadow (color = # B4BBCF, offx =-3, offy =-3, positive = 1)<BR>Chroma (color = # E1E4EC)</b><BR>Note: the colors of mask and chroma are the same, and the colors are determined by dropshadow.</fONT></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> </tD></tR></tBODY></tABLE></body></html>
Tip: you can modify some code before running
