CSS3实例教程:倾斜的网页图片库

第三步:现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-

style:none

=======================
ul.gallery li a {
 float: left;
 padding: 10px 10px 25px 10px;
 background: #eee;
 border: 1px solid #fff;
}

=============================

第四步:

现在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽.

========================
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;
}
======================
第五步:现在要进入本教程的重点了.使用CSS3 </ul>
====================
第六步:现在要对每个类,加CSS.因此在上面我们给每张图加个唯

一的类名.

============================

ul.gallery li a.pic-1 {
 z-index: 1;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
 z-index: 5;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
 z-index: 3;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
}
============================

第七步:因为每张图片在位置上的不同,我们可以为其设置个性的

风格.比如说:z-index 和 旋转 的属性.

第八步:现在图片差不多在背景上排列出来了.

===============
ul.gallery li a:hover {
 z-index: 10;
 -moz-box-shadow: 3px 5px 15px #333;
}
=================

第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移

入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕

=================

原文:http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery

木木:译的很幸苦,转载请链接,谢谢.

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!