巧用CSS滑动门技术为图像增加阴影效果

为图片添加阴影可以是图片看起来精致很多。在图片处理软件中,为图片添加阴影效果是非常容易实现的功能,然而如果为每张图片都要去用软件处理,显然是很麻 烦的,而且如果有一天要去掉水印,又要重新处理图片。下面介绍在不改变图片本身的情况下,通过CSS来实现阴影效果。本方法是墨西哥设计师Sergio Villarreal 2004 年发明的。
常规方法,代码示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Head Line</title>
<style type="text/css">
.shadow {
float:left;
background: url(images/bottom-right.gif) no-repeat bottom right;
}
.shadow div {
background: url(images/top-left.png) no-repeat;
padding: 0 4px 4px 0;
}
.shadow img {
border: 1px solid #000;
}
</style>
<!--[if gte ie 5.5000]>
<style type="text/css">
.shadow div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/top-left.png",sizingMethod='crop');
width:1px;
background:none;
}
</style>
<![endif]-->
</head>
<body>
<div class="shadow">
<div><img src="cup.gif"/></div>
</div>
</body>
</html>

 

素材下载:https://files.cnblogs.com/likebeta/201205292522859.zip

 

posted @ 2012-05-29 00:14  likebeta  阅读(542)  评论(0编辑  收藏  举报