爱莲学堂

爱莲学堂

文字阴影的几种实现方式【前端开发技能必备系列】

昨天看到博问上有人问文字阴影的事。我认为,带阴影的文字在WEB前端开发中是一项非常重要的文字装饰技巧,但是由于使用的实现方式不同,文字阴影在不同网页和浏览器中的表现也不尽相同。我总结了几种比较常见的文字阴影的实现方式及其特点,希望抛砖引玉,能够更好地促进这项技巧得到更好更广泛的应用。

1.纯图片的实现方式【最原始的方法,现在仍然沿用】

通过在图像编辑软件中实现文字阴影,然后将文字及其阴影以图片的方式输出到网页中。这种方式的文字阴影有如下几个特点:

1)跨浏览器,即在不同的浏览器下显示效果是一样的。
2)字体样式不受客户端的影响,即无论用户的电脑上有没有安装相应字体,都能正常显示。
3)不便于修改,一般只能通过图像编辑软件进行修改,然后上传到服务器。
4)下载速度慢,由于图片数据量相对文本要大得多,因此这种方式不宜在网页中大量使用。

示例:博客园管理页面的LOGO用的就是这种方式(如下图)

 

2.背景图片&文字的实现方式【最苛刻的方法,逐渐被抛弃】

通过为文字所在的元素添加背景图像(背景图像中有类似大小的相同文字)并在背景图像和文字间设置位移的方式。这种方式有以下几个特点:

1)跨浏览器。
2)字体受到客户端安装情况的影响,用户如果没有安装相应字体就会影响前景中文字的展现。
3)不便于修改。
4)下载速度慢,但优于纯图片的方式。

示例:PaperRater论文检测系统

示例代码:

<div id="title">
     <h1><a href="http://www.paper-rater.com">PaperRater论文检测系统</a></h1>
</div>
#title {position: absolute; left: 8px; top: 43px;}
 h1 {font-size38px; margin0px;}

 

3.纯CSS的实现方式【最具潜力的方法,越来越流行】

随着CSS3的不断完善和日渐流行,使用CSS3中的 text-shadow 属性来为文字添加阴影成为越来越多前端人员的选择。这种方式有以下几个特点:

1)阴影仅能在支持相应属性的浏览器中正常显示,但浏览器对该属性的支持越来越好。
2)字体不受到客户端字体安装情况的影响,但不妨碍阴影正常显示。
3)便于修改。
4)下载速度快,纯文本表示。

示例:前端观察

有关text-shadow的详细使用说明,请参见:
http://www.w3cplus.com/node/52

-----------------------------------------------------

转载请注明作者:刘涛

 

 

 

posted on 2013-03-27 00:40  爱莲学堂  阅读(736)  评论(1编辑  收藏

导航

统计信息