CSS3.0之text-shadow属性
- - 收集分享互联网资源!CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例. 如果你仔细研究了这些,你必将对text-shadow有更加深入的了解. text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图. 一、vintage 文字效果.
CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例!如果你仔细研究了这些,你必将对text-shadow有更加深入的了解。
text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图。
一、vintage 文字效果
效果:
代码:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
学习要点:text-shadow通过同时设置多个投影效果实现
二、Neon 文字效果
效果:
代码:
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
学习要点:text-shadow保持x、y轴偏移不变,逐渐增大模糊参数的数值及变幻颜色实现。
三、Anaglyphic 文字效果
效果:
代码:
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
学习要点:text-shadow与rgba结合实现,颜色采用rgb的颜色格式Red (R)、Green (G)、Blue (B),a为透明程度opacity/alpha。
关于text-shadow的更多案例详见 www.line25.com