网页教学网
 当前位置: 网页教学网 >> 网页制作 >> CSS技术应用 >> CSS实现图片阴影效果三部曲(译文)
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

CSS实现图片阴影效果三部曲(译文)

http://www.webjx.com  更新日期:2007-09-25 19:50  出处:网页教学网  作者:站长整理

CSS实现图片阴影效果三部曲 css shadow triple steps
此文译自CSS.Mastery.Advanced.Web.Standards.Solutions.Feb.2006.pdf
预览效果请直接看第三步。译文为直译,具体请参考英文版本。英文书籍也有很多“八股”,看多了就习惯了

正文开始:
第一步、如何实现图片阴影效果
为了创建这种效果,首先你设置一个阴影图片背景在外套图层标签。因为图层标签是块级元素,它们将水平伸展,并占据可以获取的所有空间。这种情形下我们可以使用这种技巧,用图层外套住图片。另外,也可以设置图层浮动,来收缩外套。(笔者用的系统是mac)


[code].img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}[/code]

为了显示带阴影效果的图片,需要设置图片负边距偏移。(阴影效果在右边和下方,所以设置整体移动5个像素)
[code].img-wrapper img {
margin: -5px 5px 5px -5px;
}
[/code]

—————————————————————-
First
To create the effect, you first need to apply your shadow graphic to the background of the
wrapper div. Because divs are block-level elements, they stretch horizontally, taking up all
the available space. In this situation we want the div to wrap around the image. You can
do this by explicitly setting a width for the wrapper div, but doing so reduces the usefulness
of this technique. Instead, you can float the div, causing it to “shrink-wrap” on modern
browsers, with one exception: IE 5.x on the Mac.
.img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
To reveal the shadow image and create the drop shadow effect (see Figure 3-13), you need
to offset the image using negative margins:
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
[html]

来先休息抽根烟


第一步的效果在FF,Opera下看是正常的,IE下会有空白
[/html]

经过第一步已经实现了图片阴影效果,但是还不完善,接下来还是要继续修饰

第二步、逼真照片边框效果
现在给图片加上边框和内补白,就可以创建一个非常好的,以假乱真的照片边框效果
Second
You can create a good, fake photo border effect by giving the image a border and some
padding
[code].img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
}[/code]
PS: 1px灰色边框和4px内补白正好抵消了5个像素的边距了。
[html]


第二步的效果在FF,Opera下看是正常的,IE下会有空白,而且左上边框没有。
[/html]
第三步、修正IE中图片显示的bug
刚才那些在标准兼容的浏览器中是显示正常的。无论怎样,我们都需要加一些简单的规则使得他在IE6显示正常。
This works for most modern, standards-compliant browsers. However, we need to add in a
couple of simple rules to get it working correctly in IE 6:

[code].img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}[/code]

PS:div设置relative 是为了使得左上两条边框正常显示,设置display:block;是为了去除图片下面的空白。
[html]

来先休息抽根烟


第三步的效果在FF,Opera,IE下看都是正常的。至此css shadow 三部曲结束
[/html]
BTW:阴影图片的选择可以是800*800大小的图片了,阴影的效果为5px就可以了。如果你想要比5px更长的可以自制一个。
在Photoshop里面新建795*795的透明,用白色填充图层1,设置样式默认的阴影修改距离为1,如果设置距离为0实际上5px的阴影只有4px了,再修改画布为800*800的,调整一下位置再保存输出。
关键词:网页制作,CSS,图片,阴影
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为