如何使用CSS3实现一个平滑的3D文本标题

iefreer 发表于 2016-05-18 18:03:12

标签: css3, text-shadow, 文本阴影, 3D文本标题

- +

要实现3D文本,基本上有3种方法:

1. 使用CSS3的投影滤镜(filter: drop-shadow)

2. 使用3d建模和CSS3 3d变换来实现(最真实)

3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)

本例简单说明使用text-shadow属性来实现3D文本的原理和方法。

这依赖于text-shadow属性的两个特性:其1是该属性可以给文本添加投影效果,其2是可以在单个元素上应用多个投影效果。

先贴一张效果图预览下:

下载.png

text-shadow的工作原理

我们看下下面这张图就明白了:


text-shadow的语法

text-shadow: h-shadow v-shadow blur color;

h-shadow是水平方向阴影位置,v-shadow是垂直阴影位置,blur是模糊度,color是阴影颜色

具体可参考W3School CSS3 参考手册:http://techbrood.com/cssref?p=css3-pr-text-shadow

具体实现代码

现在我们来构造叠加的阴影效果代码:

.text-3d {  
  text-shadow: 0 1px 0 #ccc,  
               0 2px 0 #c9c9c9,  
               0 3px 0 #bbb,  
               0 4px 0 #b9b9b9,  
               0 5px 0 #aaa,  
               0 6px 1px rgba(0,0,0,.1),  
               0 0 5px rgba(0,0,0,.1),  
               0 1px 3px rgba(0,0,0,.3),  
               0 3px 5px rgba(0,0,0,.2),  
               0 5px 10px rgba(0,0,0,.25),  
               0 10px 10px rgba(0,0,0,.2),  
               0 20px 20px rgba(0,0,0,.15);  
}

这个效果的细节是调试出来的,前面几个是投影拷贝,后面几个加上淡色调模糊效果,以使得阴影平滑过渡,填补锯齿。

你可以使用踏得网的CSS3文本阴影在线生成工具来调试:http://techbrood.com/cg-text-shadow

上面的样式代码可以被复用到您自己的文本标题上。

你也可以自己在线试试看。

possitive(0) negative(0) views6667 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章