社区学习工具库休闲

简体中文

首页 > web前端 > css教程 > CSS实现阴影文字效果_CSS/HTML

CSS实现阴影文字效果_CSS/HTML

WBOY

发布： 2016-05-16 12:10:44

原创

1812 人浏览过

<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">如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。</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流设计</i>
</td> 
       <tr> 
      <td bgcolor="#E1E4EC"> 
      
 
      用blur滤镜做出的效果，代码如下：
 
      <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流设计</i></b></font></td> 
       </tr> 
      </table> 
      
 
      用dropshadow滤镜做出的效果，代码如下：
 
      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流设计</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> 
      
 
      用glow滤镜做出的效果，代码如下：
 
      </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流设计</i></font> 
        
       
      
 
      这个效果用到了两种滤镜：shadow和alpha，代码如下：
 
      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流设计</i></font> 
        
       
      
 
      这个效果也用到两个滤镜mask和shadow，代码如下：
 
      FILTER: mask(color=#E1E4EC)
 
      shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)
 
      
 
      注意：mask的颜色要和网页背景色一致，字体的颜色由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"><font face="黑体" color="#8C96B5" size="6"><i>E流设计</i></font></td>
</table> 
       </td> 
      </tr> 
      
 
      如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：
 
      <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流设计</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> 
      
 
      用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下：
 
      <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流设计</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="黑体" color="#8C96B5" size="6"></font></td>
<i>E流设计</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流设计</i>
</td>
</table> 
       </b></font>
</td> 
      </tr> 
     </table> 
     
      
     如果背景采用图片，为了能达到满意的效果需要将mask和chroma组合使用，这样能使字体感觉是透明的，让背景透出来。
 
      
 
      上面列出的效果前者的代码是：
 
      FILTER: mask(color=#E1E4EC)
 
shadow(color=#B4BBCF,direction=135)
 
chroma(color=#E1E4EC)
 
      注意：字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。
 
      
 
      中间的代码是：
 
      FILTER: glow(strength=1)
 
mask(color=#B4BBCF)
 
chroma(color=#B4BBCF)
 
      注意：mask和chroma的颜色相同，这个颜色决定了字体的颜色。
 
      
 
      后者的代码是：
 
      FILTER: mask(color=#E1E4EC)
 
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
 
chroma(color=#E1E4EC)
 
      注意：mask和chroma的颜色相同，色彩由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> 
        
       
      
     
      
     这个效果的代码：
 
      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="//m.sbmmt.com/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>

相关标签：

CSS实现阴影文字效果

来源：php.cn

上一篇：CSS经典实用技巧18招_CSS/HTML 下一篇：深入探讨CSS中字体元素_CSS/HTML

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

创建一个悬停效果，将菜单按钮转换为具有阴影克隆版本的 x 形状首先我想承认我的标题很令人困惑，对此感到抱歉。我想要实现的是悬停时的以下效果：我的网站在这里https://wordpress-493302-3130963.cloudwaysap...

来自于 2024-04-04 11:55:21

0

2

315

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1421119
php入门教程之一周学会PHP

4264735
JAVA 初级入门视频教程

2515062
小甲鱼零基础入门学习Python视频教程

506120
PHP 零基础入门教程

861225

最新下载

更多>

网站特效

网站源码

网站素材

前端模板