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仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Django在win10下的安装并创建工程
2017/11/20 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python实现函数极小值
2019/07/10 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python手写均值滤波
2020/02/19 Python
python输入中文的实例方法
2020/09/14 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
个人充满哲理的自我评价
2014/02/20 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
电影复兴之路观后感
2015/06/02 职场文书
贷款收入证明格式
2015/06/24 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python实现简单区块链结构
2021/04/25 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL