css滤镜使文字变3D效果

四夕刚从 OECP社区看到了一篇文章 《css滤镜使文字变3D效果》,Css的确很强大, W3C 公布了样式单( CSS )的标准以来, HTML 的每一部分开始以元素的形式出现,并且事件开始真正被引入页面,动态 HTML 成为了人们讨论的热点。实际上, W3C 采用的标准即为微软的 DOM ,也就是说 IE4.0 可以更好的支持 CSS ,并且微软对 CSS 还进行了许多十分有益地探索, Filter 就是一个很好的例子。
Filter 是微软对 CSS 的扩展,与 PhotoShop 中的滤镜概念相似,它可以用很简单的方法对页面中的文字特效作出特效处理,静态如阴影、模糊的效果,动态如各种淡入淡出效果。
一般我们给文字加阴影、背景、变形、变成3D效果都是通过图片来加的,但有些时候网页并不需要图片,有些时候比如说标题是变化的,需要程序来控制什么时候调用哪些图片,所以这种时候 只能用文字来表示,但是单一的文字效果,会使网站页面大降低美观效果。这就用到了用 css样式给文字加阴影变3D效果。
效果如下图所示:
css滤镜使文字变3D效果
<<css滤镜使文字变3D效果>>
 

原代码

XML/HTML代码
  1. <style type="text/css">  
  2. .sample {   
  3.     font-family: arial black;   
  4.     font-size: 40px;   
  5.     font-weight: bold;   
  6.     cursor: hand;   
  7. }   
  8. </style>  
  9.   
  10. <span class="sample"  
  11.     style="width: 200px; height: 70; color: black; filter: Blur(Add = 0, Direction = 135, Strength = 10);">开发团队</span>  
  12.   
  13. <span class="sample"  
  14.     style="position: relative; left: -201; top: -18; width: 200; color: #2984ff;">开发团队</span>  
  15.   
  16. <span class="sample"  
  17.     style="width: 400px; height: 70; color: lightskyblue; filter: Alpha(Opacity = 60) Blur(Add = 0, Direction = 135, Strength = 20);">百洋软件实验室</span>  
  18.   
  19. <span class="sample"  
  20.     style="position: relative; left: -401; top: -15; width: 400px; color: lightskyblue; filter: Alpha(Opacity = 60);">百洋软件实验室</span>  
  21.   
  22. <span class="sample" style="width: 400px; height: 70; color: white;">po-soft   
  23.     listly</span>  
  24.   
  25. <span class="sample"  
  26.     style="width: 400px; height: 70; position: relative; left: -400; filter: mask(color = red) shadow(direction = 135) chroma(color = red);">po-soft   
  27.     listly</span>  
  28.   
  29. <span class="sample"  
  30.     style="width: 200px; height: 70; filter: mask(color = red) glow(color = black, strength = 1) chroma(color = red);">WebFX</span>  

本文转载自OECP社区http://www.oecp.cn/hi/listly/blog/1596

你可能感兴趣的:(css,文字,3D)