随着CSS3的推广,以及越来越多的浏览器开始支持CSS3标准,CSS3得到众多网页设计者的垂青。以往众多利用图片才能实现的效果,现在利用CSS3也能实现。
一. 利用CSS3制作字符阴影特效
Text Shadow (字符阴影)是目前CSS3中应用较多的一个属性,下面先看一个利用CSS3制作的字符阴影特效。
预览:在CSS3与Photoshop中对比学习(Text Shadow)字符阴影
制作上述效果的代码如下
HTML:
<h1>任鸟飞网页设计博客 <br />www.renniaofei.com</h1>
CSS代码:
body {
background-color: #ddd;
font-family: "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
margin: 50px;
color: #333;
text-align: center;
}
h1 {
font-size: 60pt;
text-shadow: #fff 0px 1px 0px;
}
代码说明:
实现Text shadow (字符阴影)的CSS代码为 text-shadow: #fff 0px 1px 0px; 这段代码代表阴影颜色为#fff ,x方向偏移为0px,y方向便宜1px,模糊程度0px,更加具体的说明可参考常用CSS3新增属性。
二. 利用Photoshop制作字符阴影特效
具体Photoshop中的设置如上所示,这里需要注意的几点如下:
- 混合模式:正常
- 不透明度尽量设置成:100%
- 角度:90
总结:
对比CSS3与Photoshop中有关字符阴影的设置之后,也就很容易理解CSS3的 Text Shadow 属性了。
只需一条CSS3的text shadow属性就能制作出字符阴影的效果,还不赶快试一下!
坐个沙发 嘿嘿~