CSS3实例教程:倾斜的网页图片库

2016-02-20 00:08 19 1 收藏

下面图老师小编要向大家介绍下CSS3实例教程:倾斜的网页图片库,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

利用纯CSS可以做出千变万化的效果,特别是CSS3的引入更让更多的效果可以做出来.现在就让我们动手做出一个关于凉爽为题的图片库.

 HTML+CSS打包下载http://www.webjx.com/files/soft/1_091113020947.rar

 

观看演示

点击查看我们要做的效果.请记住这个事例对于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

第一步:写入以下代码来构建一个基本的框架,下载背影图.


=======================
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"

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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
=============================

 

第三步:现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-

style:none

=======================
ul.gallery li a {
 float: left;
 padding: 10px 10px 25px 10px;
 background: #eee;
 border: 1px solid #fff;
}

=============================

第四步:

现在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽.

 

========================
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);
}
============================

第七步:因为每张图片在位置上的不同,我们可以为其设置个性的

风格.比如说:z-index 和 旋转 的属性.

第八步:现在图片差不多在背景上排列出来了.

===============
ul.gallery li a:hover {
 z-index: 10;
 -moz-box-shadow: 3px 5px 15px #333;
}
=================

第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移

入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕

=================

原文:http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

木木:译的很幸苦,转载请链接,谢谢.

来源:http://www.tulaoshi.com/n/20160220/1631347.html

延伸阅读
标签: Web开发
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 上一篇:CSS3教程(6):创建网站多列 要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在...
标签: Web开发
CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。你看,浏览器需要跟上了 注意:浏览器需要改进 尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样,但是需要了解的是,CSS3并没有被当前浏览器完全的支持。也就是说,如...
标签: Web开发
写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也不好,今天是星期六,我呢就再给大家补写这篇教程,带领大家用最短的时间掌握CSS Hack! 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑...
标签: Web开发
除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户...
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...

经验教程

173

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部