在CSS3与Photoshop对比中学习(Text Shadow)字符阴影

作者:     目录: PHP+MySQL     发表: 2010年04月18日

随着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属性就能制作出字符阴影的效果,还不赶快试一下!

50 个评论

  1. 疾风说道:

    坐个沙发 嘿嘿~

发表评论