如何使用CSS3实现一个平滑的3D文本标题
2016-04-27 13:58
746 查看
要实现3D文本,基本上有3种方法:
1. 使用CSS3的投影滤镜(filter: drop-shadow)
2. 使用3d建模和CSS3 3d变换来实现(最真实)
3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)
本例简单说明使用text-shadow属性来实现3D文本的原理和方法。
这依赖于text-shadow属性的两个特性:其1是该属性可以给文本添加投影效果,其2是可以在单个元素上应用多个投影效果。
先贴一张效果图预览下:
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具体实现代码现在我们来构造叠加的阴影效果代码:
上面的样式代码可以被复用到您自己的文本标题上。你也可以自己在线试试看。
by iefreer
1. 使用CSS3的投影滤镜(filter: drop-shadow)
2. 使用3d建模和CSS3 3d变换来实现(最真实)
3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)
本例简单说明使用text-shadow属性来实现3D文本的原理和方法。
这依赖于text-shadow属性的两个特性:其1是该属性可以给文本添加投影效果,其2是可以在单个元素上应用多个投影效果。
先贴一张效果图预览下:
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
上面的样式代码可以被复用到您自己的文本标题上。你也可以自己在线试试看。
by iefreer
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器:Atom
- 网站关键词标题和网页描述技巧_站长必看
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 定义标题的最好方法
- 当标题不能显示完整的解决方法
- jQuery CSS3相结合实现时钟插件
- Jquery修改页面标题title其它JS失效的解决方法
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案