HTML5实践 -- 使用css装饰你的图片画廊 - part2
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html
在上一讲中,我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式,使用:before 和 :after 伪类。:before经常会用到,他可以用来添加额外的元素。
demo预览地址:http://webdesignerwall.com/demo/decorative-gallery-2/
HTML
下面是一个ul列表代表的图片画廊。
<ul class="gallery clip"><li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"></li><li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image"></li><li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"></li> </ul>
CSS
下面是为.gallery设置的css,这里需要注意的一点是,我们需要为.gallery下面的a标签设置position: relative。
.gallery {margin: 0 0 25px;text-align: center; } .gallery li {display: inline-block;margin: 5px;list-style: none; } .gallery a {position: relative;display: inline-block; }
:before元素
我们将会为 :before 元素指定一个30 x 60px大小的曲别针背景图片。注意到我将css的content属性设为空值。没有空的content属性,容器就不会显示。
.clip a:before {position: absolute;content: ' ';top: -5px;left: -4px;width: 30px;height: 60px;background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat; }
艺术边框
利用这种技术,你可以再图片上添加任意的遮罩效果。下面的例子,我把图片背景换成了艺术边框。
.frame a:before {position: absolute;content: ' ';top: -22px;left: -23px;width: 216px;height: 166px;background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat; }
HTML5画廊
我们可以使用html5标签,创造更高级的画廊。下面的例子,我们使用<figure>包装图片,<figcaption>包含图片标题。
<ul class="gallery tape"><li><figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image"><figcaption>Image Caption</figcaption></figure></li><li><figure><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image"><figcaption>Image Caption</figcaption></figure></li><li><figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image"><figcaption>Image Caption</figcaption></figure></li> </ul>
CSS
css中我添加了两个:before,一个针对<figure>元素,另一个针对<li>元素。遮罩图片overlay.png被用在了figure:before上面,胶带图片用在了 a:before上面。
.tape li {width: 170px;padding: 5px;margin: 15px 10px;border: solid 1px #cac09f;background: #fdf8e4;text-align: center;box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2); } .tape figure {position: relative;margin: 0; } .tape a:before {position: absolute;content: ' ';top: 0;left: 0;width: 100%;height: 100%;background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat; } .tape figcaption {font: 100%/120% Handlee, Arial, Helvetica, sans-serif;color: #787568; } .tape a:before {position: absolute;z-index: 2;content: ' ';top: -12px;left: 50%;width: 115px;height: 32px;margin-left: -57px;background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat; }
CSS3 Transform
在这个例子中,我使用了软木纹饰背景,并使用transform属性转变图片。
.transform {background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);padding: 25px;border-radius: 10px;box-shadow: inset 0 1px 5px rgba(0,0,0,.4); } .transform li {border: none; }
Nth-of-Type
为了让图片旋转的更随机和自然,我使用nth-of-type去筛选图片,为不同图片设置不同的旋转角度。
.transform li:nth-of-type(4n+1) {-webkit-transform: rotate(2deg); } .transform li:nth-of-type(2n) {-webkit-transform: rotate(-1deg); } .transform li:nth-of-type(4n+3) {-webkit-transform: rotate(2deg); }
好了,今天的教程到此为止。
原文地址:http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
HTML5实践系列
HTML5实践 -- 使用css装饰你的图片画廊 - part2相关推荐
- HTML5实践 -- 使用css装饰你的图片画廊
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html 本节课我们将介绍,如何使用css在不修改图片源的前 ...
- html 画廊代码,HTML5实践-使用css装饰图片画廊的代码分享(二)
在上一讲中,我们的解决方案使用到了jquery去创建一个span标签.在这一讲中我们将用一种更好的解决方式,使用:before 和 :after 伪类.:before经常会用到,他可以用来添加额外的元 ...
- html5怎么让图片垂直居中显示,css中如何实现图片垂直居中显示?
css中如何实现图片垂直居中显示?下面本篇文章就来给大家介绍一下使用CSS实现图片垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.使用flex实现图片垂直居中 利 ...
- HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)...
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- HTML5实践 -- 三步实现响应式设计
HTML5实践 -- 三步实现响应式设计 响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章<HTML5实践 -- 流式响应式设计>.如果你是一个初学者,可能响应式 ...
- 一、12前端开发入门之css装饰
css装饰 目录 css装饰 1.垂直对齐 vertical-align 2.光标类型cursor 3.边框圆角border-radius 4.溢出部分效果overflow 6.元素整体透明opaci ...
- 7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS
阿里巴巴企业黄页HTML实现.HTML标签介绍.frameset框架.HTML5标签.CSS 一.阿里巴巴企业黄页HTML 二.HTML标签介绍 三.frameset框架.iframe框架 frame ...
- Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊
在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...
最新文章
- 道阻且长,Libra 项目负责人长文回应一切质疑
- maven学习6 Eclipse下Tomcat常用设置
- 轻量级Web应用程序:PrimeFaces(JSF)+ Guice + MyBatis(第1部分)
- Vue组件化之VueComponent介绍
- BZOJ.3495.[PA2010]Riddle(2-SAT 前缀优化建图)
- Android 源代码中的res
- 项目经验少的怎么社招_想创业,但资金少,不知如何找项目?看看这些经验,你就知道了...
- ceph:如何处理rados --striper上传失败的对象
- 腾讯云播放器 Demo与调用方法
- 粮食在计算机中的应用,计算机监控系统在粮食仓储中的应用
- 智能dns调研及bind9搭建
- 【python】db.Column(db.Integer, primary_key=True, autoincrement=True)
- linux系统安装佳能打印机驱动,如何在Debian和Debian系统上安装(Canon)打印机
- 如何安装最纯净的win7系统
- 改变ubutun 默认配色
- 不要使用Python开发大型项目!
- java.lang.IllegalArgumentException 异常报错完美解决
- //3.求和:n+nn+nnn+nnnn+nnnnn
- 17、简单的企业人事管理系统(ssh)
- 即插即用和热插拔的区别