CSS3 倾斜的网页图片库实例教程
2009-11-14 01:17
579 查看
利用纯CSS可以做出千变万化的效果,特别是CSS3的引入更让更多的效果可以做出来.现在就让我们动手做出一个关于凉爽为题的图片库.
HTML+CSS打包下载http://wt.jb51.net/200911/yuanma/css_img_xie.rar
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/3a2cd281dc53a4d67fa22327eb1185db.jpg)
观看演示
点击查看我们要做的效果.请记住这个事例对于IE来说支持的不好,但firefox;safari浏览器升级到最高版本是可以看出效果的.
我们先用CSS的基本样式来构建图片.然后再加入一些阴影和翻转的属性,最近使用z-index属性来改变图片的叠加顺序.
在开始之前先下载这些清爽的图片.
Iguassu Falls 006 by claudio_ar
Sweet Home Under White Clouds by galego
Sunset over the highway by claudio_ar
Skies and fields from Argentina’s pampa 7 by claudio_ar
Sunrise by claudio_ar
Södermanland Lake by claudio_ar
第一步:写入以下代码来构建一个基本的框架,下载背影图.
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/8475d1800d0b1d00d075e88375078488.jpg)
=======================
body {
background: #959796 url(images/wood-repeat.jpg);
}
#container {
width: 600px; margin: 40px auto;
}
=============================
第二步:用ul来定义一列图片,然后再给每张图片定义li,别忘了给每一张图片添加它们的alt.
=======================
<ul class="gallery">
<li>< a href="#"><img src="images/1.jpg"
alt="Photograph of a waterfall" /></li>
<li>< a href="#"><img src="images/2.jpg"
alt="Photograph of clouds and sunlight" /></li>
<li>< a href="#"><img src="images/3.jpg"
alt="Photograph of a lake scene at dusk" /></li>
<li>< a href="#"><img src="images/4.jpg"
alt="Photograph of a tree and green grass" /></li>
<li>< a href="#"><img src="images/5.jpg"
alt="Photograph of a beach sunset" /></li>
<li>< a href="#"><img src="images/6.jpg"
alt="Photograph of a flower and lake" /></li>
</ul>
=============================
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/639021b1d36873302193a9f64b78a900.jpg)
第三步:现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-
style:none
=======================
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}
=============================
第四步:
现在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽.
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/6ae3975441d39cbf74368ac535049a9d.jpg)
========================
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);
}
============================
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/183316d639a392f34ae512dd696be33d.jpg)
第七步:因为每张图片在位置上的不同,我们可以为其设置个性的
风格.比如说:z-index 和 旋转 的属性.
第八步:现在图片差不多在背景上排列出来了.
===============
ul.gallery li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
}
=================
第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移
入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/3a2cd281dc53a4d67fa22327eb1185db.jpg)
=================
原文:http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery
木木:译的很幸苦,转载请链接,谢谢.
HTML+CSS打包下载http://wt.jb51.net/200911/yuanma/css_img_xie.rar
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/3a2cd281dc53a4d67fa22327eb1185db.jpg)
观看演示
点击查看我们要做的效果.请记住这个事例对于IE来说支持的不好,但firefox;safari浏览器升级到最高版本是可以看出效果的.
我们先用CSS的基本样式来构建图片.然后再加入一些阴影和翻转的属性,最近使用z-index属性来改变图片的叠加顺序.
在开始之前先下载这些清爽的图片.
Iguassu Falls 006 by claudio_ar
Sweet Home Under White Clouds by galego
Sunset over the highway by claudio_ar
Skies and fields from Argentina’s pampa 7 by claudio_ar
Sunrise by claudio_ar
Södermanland Lake by claudio_ar
第一步:写入以下代码来构建一个基本的框架,下载背影图.
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/8475d1800d0b1d00d075e88375078488.jpg)
=======================
body {
background: #959796 url(images/wood-repeat.jpg);
}
#container {
width: 600px; margin: 40px auto;
}
=============================
第二步:用ul来定义一列图片,然后再给每张图片定义li,别忘了给每一张图片添加它们的alt.
=======================
<ul class="gallery">
<li>< a href="#"><img src="images/1.jpg"
alt="Photograph of a waterfall" /></li>
<li>< a href="#"><img src="images/2.jpg"
alt="Photograph of clouds and sunlight" /></li>
<li>< a href="#"><img src="images/3.jpg"
alt="Photograph of a lake scene at dusk" /></li>
<li>< a href="#"><img src="images/4.jpg"
alt="Photograph of a tree and green grass" /></li>
<li>< a href="#"><img src="images/5.jpg"
alt="Photograph of a beach sunset" /></li>
<li>< a href="#"><img src="images/6.jpg"
alt="Photograph of a flower and lake" /></li>
</ul>
=============================
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/639021b1d36873302193a9f64b78a900.jpg)
第三步:现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-
style:none
=======================
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}
=============================
第四步:
现在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽.
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/6ae3975441d39cbf74368ac535049a9d.jpg)
========================
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);
}
============================
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/183316d639a392f34ae512dd696be33d.jpg)
第七步:因为每张图片在位置上的不同,我们可以为其设置个性的
风格.比如说:z-index 和 旋转 的属性.
第八步:现在图片差不多在背景上排列出来了.
===============
ul.gallery li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
}
=================
第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移
入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030183/3a2cd281dc53a4d67fa22327eb1185db.jpg)
=================
原文:http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery
木木:译的很幸苦,转载请链接,谢谢.
相关文章推荐
- html5+css3+js开发APP实例教程2 -- 图片/图标列表
- 20个网页设计师应该学习的CSS3经典教程实例
- CSS3实例教程:超炫的网页进度条
- CSS3教程(5):网页背景图片
- Android网络:HTTP之利用HttpURLConnection访问网页、获取网络图片实例
- Java网页数据采集器实例教程[续篇-远程操作]
- CSS3实例教程:详解calc()函数功能
- asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例
- dreamweaver做网页实例教程 嵌入式框架的妙用
- Java读取网页内容并下载图片的实例
- HTML5/CSS3系列教程:使用SVG图片
- css3实现超立体3D图片侧翻倾斜效果
- 利用Node.js批量抓取高清妹子图片实例教程
- 纯CSS3实现超立体的3D图片侧翻倾斜效果
- 使用python存储网页上的图片实例
- 一款基于css3麻将筛子3D翻转特效的实例教程
- 一款基于css3的列表toggle特效实例教程
- PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例
- Css网页中属性的操作,缩放,旋转,图片倾斜
- delphi WebBrowser控件上网页验证码图片识别教程(一)