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实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
详解php命令注入攻击
2019/04/06 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
django认证系统 Authentication使用详解
2019/07/22 Python
python多线程分块读取文件
2019/08/29 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
EJB的几种类型
2012/08/15 面试题
论文答谢词
2015/01/20 职场文书
给老婆的检讨书
2015/01/27 职场文书
航班延误投诉信
2015/07/02 职场文书
执行力心得体会范文
2016/01/11 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python