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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php汉字转拼音的示例
2014/02/27 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jQuery.each使用详解
2015/07/07 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python实现清屏的方法
2015/04/30 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python3.5的包存放的具体路径
2020/08/16 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
yy司仪主持词
2014/03/22 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
写给父母的感谢信
2015/01/22 职场文书
唐山大地震观后感
2015/06/05 职场文书
商务宴会祝酒词
2015/08/11 职场文书
中学团支部工作总结
2015/08/13 职场文书
Python基础详解之描述符
2021/04/28 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android