用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 /></li>  <li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" alt="用CSS3.0兑现独特相册" height="329" width="400" style="background-color: #f0f0f0; border-right-width: 1px; border-right-style: solid; border-right-color: #aaaaaa; padding: 8px; margin: 0px;">
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到一个更高的数字，确保每一张照片在鼠标点击时跳转到堆栈的顶部。
同时调整阴影。点击查看相册效果
?
转自鹭鹭设计