CSS投影技巧,又一自适应案例

先说下实现的原理:将一个比较大的投影背景图像应用于容器div的背景,然后使用负外边距移动容器中的图像,让投影显露出来。

首先需要创建一个投影图像,我将它命名为shadow,朱宝祥的电脑,D盘,工具,(呵呵,打开PS)打开PS,创建一个800*600的图像,然后再创建一个图层,在这个图像上面画一个白色的方块,大小就是离边缘有一定的距离,用来显示投影,然后使用图层属性工具,设置一个大小5px,距离5px的黑色投影,切图,导出shadow.gif,这样前期工作就准备好了

HTML代码非常简单

<body>

<div id=”img_wrap”>

<img src=”images/img.jpg” width=”400″ />

</div>

</body>

为了产生投影效果,首先需要将投影图像应用于容易背景。因为div是块级元素,所以会水平扩展,占据所有可用空间,在这种情况下,我们可以显示的设置容器DIV的宽度,但是这么做,会限制这种技术的用途,可以浮动DIV,让他在“现在浏览器”中产生收缩包围的效果。因此会看到,这我的CSS代码里面,没有设置宽度。

#img_wrap {

margin:0 auto;

background:url(images/shadow.gif) no-repeat bottom right;

float:left;

}

为了露出图像并产生投影,对图像使用负的外边距

#img_wrap img {

margin:-5px 5px 5px -5px;

}

这样,投影效果就完成了,但是这样并不完美,可以给图像加上边框和一些内边距,产生照片边框的效果

#img_wrap img {

margin:-5px 5px 5px -5px;

background-color:#fff;

border:1px solid #a9a9a9;

padding:4px;

}

最终效果如图:

这样的样式,对于大多数浏览器是有用的,但是,为了在IE6中产生同样的效果,还需要加上如下语句

#img_wrap img {

margin:-5px 5px 5px -5px;

background-color:#fff;

border:1px solid #a9a9a9;

padding:4px;

display:block;

position:relative;

}

朱宝祥个人总结,转载请说明出处http://qitiancom.com/archives/451

原文链接:,转发请注明来源!

发表评论