用CSS3.0实现独特相册

在这里，我们使用基本的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到一个更高的数字，确保每一张照片在鼠标点击时跳转到堆栈的顶部。
同时调整阴影。点击查看相册效果

 

转自鹭鹭设计