Home > Article > Web Front-end > CSS implements shadow text effect_CSS/HTML

CSS implements shadow text effect_CSS/HTML

WBOYOriginal: 2016-05-16 12:10:441767browse

<style type="text/css"> 
 
</style>
<table width="500" border="0" cellspacing="1" cellpadding="0" bgcolor="#8C96B5" align="center"> 
 <tr>  
  <td bgcolor="#FFFFFF">  
   <table bordercolordark="#ffffff" width="100%" bordercolorlight="#000000" border="0" cellspacing="1" cellpadding="0"> 
    <tr bgcolor="#8C96B5">  
     <td colspan="2" bgcolor="#8C96B5" width="100%" height="16">  
      <div align="center" class="title_1">..:: 巧用CSS制作艺术字 ::..</div> 
     </td> 
    </tr> 
   </table>
  </td>
 </tr>
 <tr>
  <td bgcolor="#E1E4EC">
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。</td> 
    </tr> 
   </table>
     <td class="text">If we flexibly apply the characteristics of various CSS filters and combine them, we can get many unexpected effects. Here are some effect demonstrations for your reference. </td>
    
   <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="200" height="50"> 
       <tr>  
        <td style="FILTER: blur(direction=135,strength=8)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
 <b>
  </b>
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: blur(direction=135,strength=8)" align="center"><font face="黑体" color="#8C96B5" size="6"></font></td>
</table>
<i>E Flow Design</i>
</td>
       <tr>
      <td bgcolor="#E1E4EC">
      
 
      The effect created with the blur filter, the code is as follows:
 
      <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>FILTER: blur(direction=135,strength=8)<b></b>
    </td>
   </tr>
  </table>
 </td>
 </tr>
  <tr>
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    <td bgcolor="#E1E4EC">
     </td>
<td class="text">
      <table align="center" border="0" width="200" height="50">
       <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
        </td>
<td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑体" color="#8C96B5" size="6 "><b><i>E flow design</i></b></font></td>
       </tr>
      </table>
      
 
      The effect created with the dropshadow filter, the code is as follows:
 
      FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)<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="200" height="50"> 
       <tr>  
        <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
  <b>
 </b>
 </td>
  </tr>
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    </table>
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><i> E flow design</i><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="200" height="50"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
      <b>
      
 
      The effect created with the glow filter, the code is as follows:
 
      </b>FILTER: glow(color=#B4BBCF,strength=5)</td>
</tr>
    </table>
   
  
 
 
  
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>E flow design</i></font>
       
      
      
 
      This effect uses two filters: shadow and alpha. The code is as follows:
 
      FILTER: alpha(opacity=100,finishiopacity=0,style=1)
 
      shadow(color=#8C96B5,direction=135) 
    
   
  
 
 
  
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>E flow design</i></font>
       
      
      
 
      This effect also uses two filters mask and shadow. The code is as follows:
 
      FILTER: mask(color=#E1E4EC)
 
      shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)
 
      
 
      Note: The color of the mask should be consistent with the background color of the web page, and the color of the font is determined by the shadow. 
    
   </td>
 
 <tr>
  <td bgcolor="#E1E4EC">
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
     </td>
<td class="text">
      <table align="center" border="0" width="200" height="50">
       <b>
        </b><td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><i>E flow design</i></td>
</table>
       </td>
      </tr>
      
 
      If the above effect is Yin text, then this effect should be regarded as Yang text. Use two filters to implement mask and dropshadow. Note that the color of the mask should be consistent with the background color of the web page, or use mask and chroma in pairs. The same effect can be achieved. The code is as follows:
 
      <tr>FILTER: mask(color=#E1E4EC)
 
      dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
 
      chroma(color=#E1E4EC)"<td bgcolor="#E1E4EC"> <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑体" color="#E1E4EC" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
    <b>
   </b>
  </td>
 </tr>
 </table>
  </td>
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       <tr>
        <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑体" color="#E1E4EC" size="6"></font></td>
<td bgcolor="#E1E4EC">
<i>E-flow design</i><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"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></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"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
<table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_3.jpg" border="0"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height="54"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
       </td>
      </tr>
      
 
      You can use the glow filter to create hollow characters by setting the font color to the background color and then setting the strength value of the glow filter to 1 or 2. The code for this effect is as follows:
 
      <tr>FILTER: glow(color=#8C96B5,strength=2)
 
      shadow(color=#B4BBCF,direction=135)<td class="unnamed1"> <font class="text">
    <b>
   </b>
  <b>
 </b>
 <b>
  </b>
   <table width="100%" border="0" cellspacing="8" cellpadding="0">
    
     <td class="text">
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_1.jpg" border="0">
       
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><i>E flow design</i></font></td>
</table>
</td>
       <tr>
      <td bgcolor="#E1E4EC">
      
 
      
 
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_2.jpg" border="0">
       <table width="100%" border="0" cellspacing="8" cellpadding="0"> 
    <tr>  
     <td class="text">  
      <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"><font face="Verdana" color="#8C96B5" size="6"><i><b>WELCOME  
         TO
 
         <a href="http://WWW.E-FLOWING.COM</b></i></font></td>" target="_blank">WWW.E-FLOWING.COM</a></b></i></font></td> 
       </tr> 
      </table>
        </td>
<td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height="54"><font face="Blackbody" color="#8C96B5" size="6"></font></td>
<i>E-flow design</i>
</tr>
<tr>
<td class="unnamed1">
       <font class="text">
      <b>
      
 
      
 
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_3.jpg" border="0">
       
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height="54">
<font face="黑体" color="#8C96B5" size="6"></font><i>E flow design</i>
</td>
</table>
       </b></font>
</td>
      </tr>
     </table>
    
    
     If the background is a picture, in order to achieve a satisfactory effect, you need to use mask and chroma in combination. This will make the font feel transparent and let the background show through.
 
      
 
      The code for the former effect listed above is:
 
      FILTER: mask(color=#E1E4EC)
 
shadow(color=#B4BBCF,direction=135)
 
chroma(color=#E1E4EC)
 
      Note: The color of the font is determined by the shadow. The colors of the mask and chroma must be the same, and the color is arbitrary.
 
      
 
      The code in the middle is:
 
      FILTER: glow(strength=1)
 
mask(color=#B4BBCF)
 
chroma(color=#B4BBCF)
 
      Note: The color of mask and chroma are the same, and this color determines the color of the font.
 
      
 
      The code for the latter is:
 
      FILTER: mask(color=#E1E4EC)
 
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
 
chroma(color=#E1E4EC)
 
      Note: The colors of mask and chroma are the same, and the color is determined by dropshadow. 
    
   
  
 
 
  
   <table width="100%" border="0" cellspacing="8" cellpadding="0">
    
     <td class="text">
      <table height="150" cellspacing="0" cellpadding="0" width="480" align="center" background="http://www.e-flowing.com/1/bg_1.jpg" border="0">
       
        <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)" height="109" align="center" valign="middle"><font face="Verdana" color="#8C96B5" size="6"><i>WELCOME
         TO
 
         <a href="http://WWW.E-FLOWING.COM<%F0%9F%8E%9C></i><%F0%9F%8E%9C><%F0%9F%8E%9C>" target="_blank">WWW.E-FLOWING.COM</a></i>
       
      
     
    
    
     Code for this effect:
 
      FILTER: glow(strength=4)mask(color=#E1E4EC)
    
   
  
 
 <br><input onclick="runEx('runcode39707')" type="button" value="运行代码"> <input onclick="doCopy('runcode39707')" type="button" value="复制代码"> <input onclick="doSave(runcode39707)" type="button" value="保存代码">[Ctrl+A 全選 註:<a href="/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能執行</a>]</font></td>
</table>
</td>
</table>
</table>
</td>
</tr>
</table></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</table>
</td>
</table>
</td></tr></font></td>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：18 classic CSS practical skills_CSS/HTMLNext article：18 classic CSS practical skills_CSS/HTML

Related articles

See more