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 相关文章推荐
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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抓取https的内容的代码
2010/04/06 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
化验室技术员岗位职责
2013/12/24 职场文书
中学教师管理制度
2014/01/14 职场文书
工程采购员岗位职责
2014/03/09 职场文书
优秀团员事迹材料
2014/12/25 职场文书
个人年终总结结尾
2015/03/06 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
设置IIS Express并发数
2022/07/07 Servers