Welcome, Old Sport!

CSS3阴影效果研究

by ilikecss ON 2012/06/08 8100

CSS3阴影效果研究这两天一直在忙着学习和收集CSS3的资料,在看到CSS3阴影部分时网上看到许多实例,比较感兴趣的是利用CSS3的阴影效果制作3D效果字体,以及容器阴影效果。这里制作了简单的Demo来和大家更直观的分享和学习。

由上面的Demo我们可以看到3D效果的字体和容器阴影效果。首先是3D字体,制作和原理非常简单,我们要利用到新属性text-shadow(文字阴影),方法是设置阴影上下左右距离,模糊度和颜色。色彩和阴影距离呈递增模式,就这样一层层搭建,效果由个人而定。具体代码如下:

font: 50px/1 "Trebuchet MS","Myriad Pro",Arial,sans-serif; 
text-shadow: 
0 1px 1px #bbb,
0 2px 0 #999, 
0 3px 0 #888, 
0 4px 0 #777, 
0 5px 0 #666, 
0 6px 0 #555, 
0 7px 0 #444, 
0 8px 0 #333, 
0 9px 7px #302314;

第2个则是容器的阴影,CSS属性是box-shadow,具体代码:

box-shadow: 2px 2px 10px 2px black

这两种阴影效果学习和掌握不是太难,多用就能融会贯通了。下面是2则CSS的贴士,Class名字请大家自取。


// 清除浮动
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child html .clearfix { zoom: 1; } /* IE7 */
 
    // 设置滤镜效果
    filter:alpha(opacity=50);    /* ie  */
    -moz-opacity:0.5;    /* 旧的火狐  */
    -khtml-opacity: 0.5;    /* 旧safari */
    opacity: 0.5;    /* 多数浏览器通用*/
10条评论
  1. #1

    zwwooooo说道:

    还木有大量使用,哈

  2. #2

    潜行者m说道:

    自从CSS3有了这个功能,一句代码顶过去五句,一口气上五楼,不费劲!

  3. #3

    牙博士说道:

    这两种阴影效果学习和掌握不是太难,多用就能融会贯通了。




TOP