listly的空间

我们一直在努力....

css滤镜使文字变3D效果

标签: css 文字 3D

 

Css的确很强大,W3C公布了样式单(CSS)的标准以来,HTML的每一部分开始以元素的形式出现,并且事件开始真正被引入页面,动态HTML成为了人们讨论的热点。实际上,W3C采用的标准即为微软的DOM,也就是说IE4.0可以更好的支持CSS,并且微软对CSS还进行了许多十分有益地探索,Filter就是一个很好的例子。
Filter是微软对CSS的扩展,与PhotoShop中的滤镜概念相似,它可以用很简单的方法对页面中的文字特效作出特效处理,静态如阴影、模糊的效果,动态如各种淡入淡出效果。
一般我们给文字加阴影、背景、变形、变成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>  

 


    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

最近访客
关注此文的人们还关注