css

CSS3:文字阴影知多少

最近我因为要安装Firebug 1.4导致我不得不安装了Firefox 3.5,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.

wordpress 2.8 阴影

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.

目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

一些试验与demo

我做了点小小的试验,做成了一个Demo页面.

为了向浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

textshadow文字阴影

如果你使用的是Firefox 3.1+,Safari等浏览器,那请直接点Demo演示

为什么使用text-shadow

  • 可以增强文字质感
  • 可以减少图片的使用,减少带宽支出
  • 随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影

不相信?请看看下面的截图,这是对http://tweetcc.com/网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字层次感好了许多.

tweetcc

其他例子

接下来我们继续看看一些有趣的text-shadow下的例子吧,首先看看vikiworks用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性.

 CSS3:文字阴影知多少

参考资料及常见问题

看完上面觉得不够,那么可以参考一下下面的文章.

问题有:

  • 如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢.

转载请注明来源:http://www.ediyang.com/css3-text-shadow-why-and-how/

请留意:本文章旨在借刀杀人抛砖引玉引起大家对CSS3的兴趣.

也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅.

No related posts.

35 Comments:

  1. ChobitZ says:

    阴影过多好像会有点慢啊

  2. eddie says:

    谢谢你的提醒….马上更新一下文章

  3. Jutoy says:

    又是顽固的IE,CSS还有这么强悍的参数,真是长见识了呢~

    • eddie says:

      呵呵,其实还有一些更有趣的属性…有空再整理一下
      问题是浏览器支持的情况参差不齐

  4. bolo says:

    ie就是垃圾,想实现这种效果的话要用js了。貌似wekit核心的浏览器css特效特牛b

  5. 万戈 says:

    真应该好好学学CSS了,我太落后了,只会最最基础的CSS

  6. TaoGOGO says:

    ie不能使那用出就不打了,不过技术很好哦

    • eddie says:

      假如网站用户使用Firefox或是webkit内核的浏览器有30%,我觉得还是可以提供这个阴影的

  7. schuen says:

    不通用呀。。

    • eddie says:

      对啊,目前就是IE家族不支持,谷歌浏览器,Safari,Firefox 3.5都已经支持了

  8. fouliny says:

    哈,我想知道你网站用的是什么字体,连中文都可以变得好看。

    • eddie says:

      你好,用的就是雅黑字体优先,没有做什么特别的处理的

      • fouliny says:

        愁,我也再用呢,是不是12PX不行?

        • eddie says:

          呵呵不会啊,现在回复这里的文字就是12px的。但是正文是13px

          • fouliny says:


            我的代码写的第一个是。- -
            Lucida Grande

  9. fouliny says:

    不错哈。弄好了。不过不知道高亮代码怎么弄,请教。不是Wordpress没有插件。- -

    • eddie says:

      有插件的,但是我现在没用了。
      你可以Google一下code highlight wordpress

      • fouliny says:

        额,我是说。我不是WP,想弄个代码加亮,能找呢,听说豆芽不错,可代码真多。

  10. fouliny says:

    我也挺喜欢Firebug的,不过非要整合在浏览器里,真是的,不会是一个独立的软件么。0 0 不知道有没有。EditPlus = =

  11. fouliny says:

    博客相当不错。哈哈。学到了不少。个个精辟,虽然文章不多。

  12. fouliny says:

    十分希望博主能写点关于EditPlus的,毕竟网上很少很少,绝大部分都是E文的,要不就是版本是2的,

    嘿嘿,博主共享一下你的EditPlus和配置被。

    • eddie says:

      哈哈,最近改用notepad++了,主要是有javascript的自带完成功能。
      不过我以前一直用editplus

  13. 仁心博客 says:

    那些字体做的真漂亮

  14. 天涯游子 says:

    嗯。。收获不少啊。。3Q

  15. 老K says:

    so nice!

  16. [...] 1、幸福收藏夹(这里也有不少关于 WP 插件的话题) 2、edi.Yang(页面真美啊~口水ing) VN:F [1.7.5_995]please wait…Rating: 0.0/10 (0 votes cast)VN:F [...]

  17. horan says:

    呃,我也觉得像火鸡……囧

  18. 蜡果 says:

    沙发是这样做的。呵呵

  19. atpx says:

    请问css3字体阴影效果如何在Wordpress的插件mycss中体现呢?

  20. [...] http://www.ediyang.com/css3-text-shadow-why-and-how/ 归类于: 网页设计 — 标签:css, 前端开发, 网站开发 — virusG @ [...]

Leave a Reply

Back To top