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

 

转自鹭鹭设计