在这里,我们使用基本的CSS样式来制作照片库,其中加上一些额外的阴影和旋转效果,然后使用 Z -index 属性来改变所有对象的堆叠顺序。因为我们使用的是CSS3.0,所以使用IE浏览器的用户不能看到完整的效果,但完全支持Firefox和Safari浏览器。
点击查看相册效果
CSS代码 |
body { background: #959796 url(images/wood-repeat.jpg); }
#container { width: 600px; margin: 40px auto; } |
背景是重复的木质纹理图片,container中是主要内容,包括文字和照片。
HTML代码 |
<ul class="gallery"> <li><a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"> <img src="images/1.jpg"/></li> <li><a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"> <img src="images/2.jpg"/></li> <li><a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"> <img src="images/3.jpg" /></li> <li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"> <img src="images/4.jpg"/></li> <li><a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"> <img src="images/5.jpg"/></li> <li><a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"> <img src="images/6.jpg"/></li> </ul> |
gallery是照片库的类,选取一些自己感兴趣的照片,显示如下图所示:
CSS代码 |
ul.gallery li a { float: left; padding: 10px 10px 25px 10px; background: #eee; border: 1px solid #fff; -moz-box-shadow: 0px 2px 15px #333; position: relative; } |
给图像添加一些样式来表现相册效果。首先靠左浮动叠排起来,每张照片设置内补丁,浅灰色背景。1px的白色边框非常微妙,显的边缘更亮,有光线凹凸感。
使用CSS3阴影 属性给照片添加一些阴影,以实现照片的真实感。为确保照片的堆叠顺序,我们还需要添加相对位置属性。
CSS代码 |
ul.gallery li a.pic-1 { z-index: 1; -webkit-transform: rotate(-10deg);/*适于safari*/ -moz-transform: rotate(-10deg);/*适于火狐*/ } ul.gallery li a.pic-2 { z-index: 5; -webkit-transform: rotate(-3deg);/*适于safari*/ -moz-transform: rotate(-3deg);/*适于火狐*/ } ul.gallery li a.pic-3 { z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); } |
给各个照片指定不同的 Z-index 和旋转属性。一叠照片现在相互重叠的随机出现在木制板表面上 。
CSS代码 |
ul.gallery li a:hover { z-index: 10; -moz-box-shadow: 3px 5px 15px #333; } |
调整Z-index到一个更高的数字,确保每一张照片在鼠标点击时跳转到堆栈的顶部。
同时调整阴影。点击查看相册效果
转自鹭鹭设计