巧用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