Basic CSS text filter effects

Nothing left to worry about. sort out some CSS text effects for beginners. Here is an example. These are the most basic filter applications. In fact, the combination of two or more filters will produce unexpected results. If you have any problems, try it first, of course, you must pay special attention to the color combination. Sometimes the effect cannot be seen if the color is not good, and the application that works with the background image will also have a good effect. Because it is too lazy, no comments are written and no syntax format is written. Let's take a look! Hey. (Don't scold me)

1 ,:

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

Sunny

Sunny

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

All the way sunshine

2,Source code

<Table border = 1 style = "border-style: solid; border-width: 1; font-size = 12px" width = "520"> <Tr> & Lt; TD width = "510" & gt; <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> & Lt; TD width = "510" & gt; <Span style = "font-size: 30pt; display: block; Text-align: center; color: darkblue; Filter: blur (add = T, direction = 135, strength = 10); Height: 1 "> sunshine all the way </span> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <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"> sunshine all the way </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div style = "height: 1; width: 100%; Font-family: impact; font-size: 30pt; color: Navy; display: block; Filter: progid: dximagetransform.microsoft.wav E (strength = 3) "> <P align = "center"> sunshine all the way </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div style = "height: 1; width: 100%; Font-family: impact; font-size: 30pt; color: Navy; display: block; Filter: progid: dximagetransform.microsoft.wav E (strength = 3, freq = 5) "> <P align = "center"> sunshine all the way </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <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 all the way </span> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Span style = "font-size: 30pt; display: block; Text-align: center; color: darkblue; Filter: Shadow (color = blue); Height: 1 "> sunshine </span> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div align = "center" style = "height: 1; font-size: 30pt; Filter: dropshadow (color = Maroon, positive = 1); "> sunshine all the way </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div align = "center" style = "height: 1; font-size: 30pt; Filter: dropshadow (color = Maroon, positive = 0); "> sunshine all the way </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div style = "filter: progid: DXImageTransform. Microsoft. engrave (bias = 0.5 ); Height: 1; font-size: 20pt; font-family: impact; Background-color: Blue "> <P align = "center"> sunny </div> </TD> </Tr> <Tr> & Lt; TD width = "510" & gt; <Div style = "filter: progid: DXImageTransform. Microsoft. emboss (bias = 0.5 ); Height: 1; font-family: impact; font-size: 20pt; Background-color: Blue "> <P align = "center"> sunny </div> </TD> </Tr> <Tr> <TD style = "filter: mask (color = # e1e4ec) shadow (color = #8c96b5, direcction = 135) chroma (color = # e1e4ec) "align =" center "> <font color =" blue "size =" 6 "> <B> sunshine all the way </B> </font> </TD> </Tr> <Tr> <TD style = "filter: alpha (opacity = 100, finishiopacity = 0, style = 1) shadow (color = blue, direction = 135) "align =" center "> <font color =" blue "size =" 6 "> <B> sunshine all the way </B> </font> </TD> </Tr> <Tr> <TD style = "filter: mask (color = # e1e4ec) dropshadow (color = # b4bbcf, offx =-3, offy =-3, positive = 1) chroma (color = # e1e4ec) "align =" center "> <font color =" blue "size =" 6 "> <B> sunshine all the way </B> </font> </TD> </Tr> <Tr> <TD style = "filter: glow (color = #8c96b5, strength = 2) shadow (color = # b4bbcf, direction = 135) "align =" center "> <font color = # e1e4ec size = 6> <B> sunshine all the way </B> </font> </TD> </Tr> <Tr> <TD style = "filter: mask (color = # e1e4ec) shadow (color = # b4bbcf, direction = 135) chroma (color = # e1e4ec) "align =" center "> <font Color = #8c96b5 size = 6> <B> sunshine all the way </B> </font> </TD> </Tr> <Tr> <TD style = "filter: glow (strength = 1) mask (color = # b4bbcf) chroma (color = # b4bbcf) "align =" center "Height = 54> <font color = #8c96b5 size = 6> <B> all the way to sunshine </B> </font> </TD> </Tr> <Tr> <TD> <span style = "position: absolute; font-size: 30pt; color = blue; filter: fliph"> all sunshine </span> </TD> </Tr> <Tr> <TD> <span style = "position: absolute; left: 200; font-size: 30pt; color = blue; filter: flipv "> sunshine all the way </span> </TD> </Tr> </Table> <Table align = center background = "http://www.idc2008.com/468X60-8.gif" border = 0> <Tr> <TD style = "filter: glow (strength = 4) mask (color = # e1e4ec) "> <font size =" 7 "> <B> all the way to sunshine </B> </font> </TD> </Tr> </Table>