教程：CSS高级技巧之阴影效果

日期：2008年6月22日作者：查看:[大字体中字体小字体]

　　CSS阴影效果 (Drop Shadows)

　　一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.

　　原理:

　　给＜img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把＜img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.

　　备用的阴影图像

　　HTML代码如下:

＜div class="image_shadow">
＜img src="/img/2008-6-21/20086211084265983.jpg" alt="" />
＜/div>

　　CSS代码如下:

.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #ccc;}

　　红色代码部分是为IE 6准备的, 不然...

　　Clagnut阴影 :

　　Richard Rutter提供了一个类似的阴影方法, 他用的是相对定位来偏移图像.

　　CSS代码如下:

.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid 1px #ccc;}

　　上面的阴影都有点生硬(hard), 我们可以通过建立一个额外的div标签, 再运用一个带透明度的png蒙板来遮盖阴影图片的边缘.

具有Alpha的阴影蒙板图片

　　HTML代码如下:

＜div class="image_shadow">
＜div>
＜img src="/img/2008-6-21/20086211084265983.jpg" alt="" />
＜/div>
＜/div>

　　CSS代码如下:

.image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow div{float:left;padding:0 5px 5px 0;background:url(../images/shadow_mask.png) no-repeat left top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;}

　　效果如下:
[1] [2] 下一页
教程：CSS高级技巧之阴影效果相关文章：
·3DMax:跟我学做房间效果图
·Flash制作非常逼真的下雪视觉动画效果
·对联广告JS代码效果大全
·Flash制作滚动广告图片效果
·对联广告代码效果大全
·Photoshop制作Lomo风格非主流效果
·网页对联广告代码效果大全
·『隐现式QQ空间开门效果3款』
·Flash中百叶窗效果的实现
·一款DIV+CSS导航条效果
教程：CSS高级技巧之阴影效果相关软件
·麦克风混响效果器 V1.0 绿色版
·疯狂水果机(Fruit Machine Mania)
·SRS Audio Sandbox(声卡效果增强软件) V1.9.0.2 汉化版
·果蔬连连看 V2006
·联众青苹果之游戏马算牌器 V3.0 Build 5.0206 正式版
·珊瑚青苹果Flash播放软件 V2.1
·禁果之味
·胜利之日:起源电影效果演示
·彩虹岛之糖果乐园(Rainbow Islands─Candyland)
·甜蜜糖果

上一篇:Dr.Web大蜘蛛注重域名的安全性

下一篇:教程：CSS高级技巧之阴影效果

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

教程：CSS高级技巧之阴影效果

精品推荐

热点TOP10

特别推荐