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


Posted in HTML / CSS onNovember 14, 2009

利用纯CSS可以做出千变万化的效果,特别是CSS3的引入更让更多的效果可以做出来.现在就让我们动手做出一个关于凉爽为题的图片库.

 HTML+CSS打包下载http://wt.3water.com/200911/yuanma/css_img_xie.rar
 CSS3 倾斜的网页图片库实例教程

观看演示

点击查看我们要做的效果.请记住这个事例对于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

第一步:写入以下代码来构建一个基本的框架,下载背影图.

CSS3 倾斜的网页图片库实例教程
=======================
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>
=============================

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

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

style:none

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

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

第四步:

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

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

========================
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);
}
============================

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

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

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

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

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

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

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

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

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

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

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

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 #HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 #HTML / CSS
利用CSS3的定位页面元素
Aug 29 #HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 #HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 #HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python 序列的方法总结
2016/10/18 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python文件写入write()的操作
2019/05/14 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
什么是组件架构
2016/05/15 面试题
六五普法规划实施方案
2014/03/21 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
健康状况证明书
2014/11/26 职场文书
应急管理工作总结2015
2015/05/04 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
mysql 索引合并的使用
2021/08/30 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis