[转]常用的CSS3文字特效
2012-08-21 15:47
351 查看
PS:请使用支持CSS3的浏览器,如Chrome、Firefox3.5+、Safari4+、Opera
文字阴影 text-shadowtext-shadow是最为简单及常用的效果,而且有很多变换,这里列举一些有代表性的:
1.普通:
.text-shadow{ text-shadow:1px 1px 2px #2c5103; color:#60ad0d; }
Here is some text effect
2.3D:
.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); color:#fff; background:#3699f6; }
Here is some text
effect
4.外发光:
.text-light{ text-shadow:0 0 20px #ff6600; color:#fff; background:#333; }
Here is some text
effect
5.模糊:
.text-blur{ text-shadow:0 0 10px #fff; color:transparent; background:#333;}
Here is some text effect
6.凹痕:
.text-indent{text-shadow: 0 1px 1px #FFF; color: #717171; background:#d3d3d3;}
Here is some
text effect
7.浮雕:
.text-carve{ text-shadow: -1px -1px #fff, 1px 1px #333; color: #CCC; background:#d3d3d3;}
Here is some
text effect
结合其他CSS3样式做出的文字效果:
内阴影:
这里用到了背景剪切,想了解更多请看这里 background-clip
.text-inner-shadow{ background: #666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow:rgba(255,255,255,0.5) 0px 3px 3px;}
Here is some text effect
改变文字选取的默认颜色
用到了伪元素 ::selection
p.orange::selection { background:#ff6600; color:#fff;}
用鼠标选取这段文字就可以看到效果,用鼠标选取这段文字就可以看到效果,用鼠标选取这段文字就可以看到效果,用鼠标选取这段文字就可以看到效果。
重叠文字
这里用了个伪类形成重叠的文字,注意伪类中content: attr(title),直接取的title值。
彩蛋:用红蓝眼镜看的话会有立体效果哦~(文字的颜色是根据自己的一副红蓝眼镜调配的,不知道适不适用其他的,呵呵)
.text-overlap{ position: relative; font: 130px Helvetica, Sans-Serif; letter-spacing: -5px; color: rgba(0,255,240,0.5);} .text-overlap:after{ content: attr(title); position: absolute; left: 10px; top: 5px; color: rgba(255,6,0,0.5);}
IInterest
原文链接:http://www.iinterest.net/2011/06/25/css3-text-effect/
相关文章推荐
- CSS3中的文字特效
- [HTML5&CSS3]纯css3实现的文字亮光特效
- CSS3实现文字流光渐变特效
- css3文字导航鼠标悬停气泡动画特效源码下载
- 盘点5个典型的CSS3文字特效
- 分享十个CSS3鼠标滑过文字动画特效
- 面试题1.闭合标签有哪些??CSS3中阴影,文字增加特效,渐变,旋转,缩放
- CSS3的文字发光特效
- 纯css3特效实现的文字亮光
- CSS3-文字特效和2/3D转换
- CSS自学笔记(12):CSS3文字特效
- CSS3+HTML5特效5 - 震动的文字
- 常用CSS3效果:用text-shadow做CSS3 文字描边
- 纯css3实现的文字亮光特效
- CSS3实现文字流光渐变特效
- CSS3+HTML5特效6 - 闪烁的文字
- css3 ——text-shadow使用阴影叠加出的燃烧的文字特效
- CSS3 三维立体文字及旋转特效
- 纯css3实现的文字亮光特效
- HTML5 SVG和CSS3超酷文字遮罩动画特效