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选择器的研究(详解)
Sep 16 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
css背景和边框标签实例详解
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脚本的10个技巧(5)
2006/10/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
简单的js表格操作
2016/09/24 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
js实现日历的简单算法
2017/01/24 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
python list 合并连接字符串的方法
2013/03/09 Python
Python中的各种装饰器详解
2015/04/11 Python
Python内存读写操作示例
2018/07/18 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2015年检验科工作总结
2015/04/27 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript