Cascading Style Sheets Tutorial

  Xianlaimoshi, finishing some CSS text effects to beginners.    Below be an example, this is the most basic application of the filter, in fact two or several different filters will be a combination of unexpected results, problems to try their own hands more than OK, of course, to pay special attention to color combination, and sometimes by color is not see results, with a background picture of the application will also have a good effect.    Because Talan, there is no written notes nor write grammar format what they see!    Hei hei.    (See, I do not understand Biema ah) 

  1, Fig effect: 

  Sunshine all the way sunshine all the way 

  Sunshine all the way 

  Sunshine all the way 

  Sunshine all the way 

  Sunshine all the way all the way sunlight sunshine all the way sunshine all the way 

SUNNY

SUNNY

  Sunshine all the way way way way way sunlight sunshine sunshine all the way way way way way way sunshine all the way sunlight sunshine all the way sunshine all the way 

  2, source code 

  <table Border=1 style="border-style: solid; border-width: 1;font-size=12px" width="520"> 
<tr>
  <td Width="510"> 
  <Span style = "font-size: 30pt; display: block; 
  Text-align: center; color: blue; 
  Filter: glow (color = red, strength = 10); height: 1 "> sunshine all the way </ span> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <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>
  <td Width="510"> 
  <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"> way sunlight </ div> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <Div style = "height: 1; width: 100%; 
  Font-family: impact; font-size: 30pt; color: navy; display: block; 
  Filter: progid: DXImageTransform.Microsoft.wave (Strength = 3) "> 
  <p Align="center"> way sunlight </ div> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <Div style = "height: 1; width: 100%; 
  Font-family: impact; font-size: 30pt; color: navy; display: block; 
  Filter: progid: DXImageTransform.Microsoft.wave (Strength = 3, freq = 5) "> 
  <p Align="center"> way sunlight </ div> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <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>
  <td Width="510"> 
  <Span style = "font-size: 30pt; display: block; 
  Text-align: center; color: darkblue; 
  Filter: shadow (color = blue); height: 1 "> sunshine all the way </ span> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <Div align = "center" style = "height: 1; font-size: 30pt; 
  Filter: dropshadow (= maroon color, positive = 1); "> sunshine all the way </ div> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <Div align = "center" style = "height: 1; font-size: 30pt; 
  Filter: dropshadow (= maroon color, positive = 0); "> sunshine all the way </ div> </ td> 
  </ Tr> 
<tr>
  <td Width="510"> 
  <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>
  <td Width="510"> 
  <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,direction=135)chroma(color=#E1E4EC)" align="center"> <font color = "blue" size = "6 "> <b> way sunlight </ 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> way sunlight </ 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> way sunlight </ 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> way Sunshine </ 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> way sunlight </ 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> Sunshine all the way </ b> </ font> </ td> 
  </ Tr> 
<tr>
  <td> <span Style="position:absolute;font-size:30pt;color=blue;filter:fliph"> way sunlight </ span> </ td> 
  </ Tr> 
<tr>
  <td> <span Style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv"> way sunlight </ 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> way sunlight </ b> </ font> </ td> 
  </ Tr> 
  </ Table> 

Tags: Basic, div effects, Text Alignment, Text Decoration, Text Indentation, Text Transformation

Releated Posts

• Spring Festival Party to achieve phone numbers were randomly selected text effects
• Flash animation effects create text beating
• Flash text with the mouse produced mobile animation effects
• Making light of the text effects
• We solve for dynamic text effects and documents show that the contradiction between the size

This entry was posted on Monday, February 11th, 2008 at 12:00 am and is filed under Css+Div Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.