html 画廊代码,HTML5实践-使用css装饰图片画廊的代码分享(二)
在上一讲中,我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式,使用:before 和 :after 伪类。:before经常会用到,他可以用来添加额外的元素。
HTML
下面是一个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标签,创造更高级的画廊。下面的例子,我们使用
-
Image Caption
-
Image Caption
-
Image Caption
CSS
css中我添加了两个: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);
}
好了,今天的教程到此为止。
html 画廊代码,HTML5实践-使用css装饰图片画廊的代码分享(二)相关推荐
- HTML5实践 -- 使用css装饰你的图片画廊
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html 本节课我们将介绍,如何使用css在不修改图片源的前 ...
- HTML5实践 -- 使用css装饰你的图片画廊 - part2
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html 在上一讲中,我们的解决方案使用到了jquery去创 ...
- 图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
- html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示 下载资源: 16 次 下 ...
- html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下. 首先要和大家分享的是,如何使用div+css创建三角形.在这里我先把相关代码粘贴出来,然后再为大家讲解原理 ...
- php 教师批改作业代码,html5 canvas做批改作业的小插件代码示例
本篇文章小编给大家分享一下html5 canvas做批改作业的小插件代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 需求分析 能进行批改,就是相当 ...
- html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
- python图像合成代码_python使用pil库实现图片合成实例代码
本文研究的主要是python PIL实现图片合成的相关内容,具体介绍如下,分享实例代码. 在项目中需要将两张图片合在一起.遇到两种情况,一种就是两张非透明图片的合成, 一种是涉及到透明png的合成. ...
- html中第一行代码,HTML5 CSS3初学者指南(1) – 编写第一行代码
介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器 ...
最新文章
- (转)个例子让你了解Java反射机制
- 使用多个DNS供应商以缓解DDoS攻击
- 安卓linux终端termux下载,高级手机终端app
- Redis高可用方案-哨兵模式-SpringBoot整合
- org.apache.flink.table.api.bridge.java.internal.BatchTableEnvironmentImpl找不到的问题
- Java 程序执行过程的内存流程图(结合类加载器 ClassLoader 讲解)
- 开源和非开源IM即时通讯源码有什么区别,哪个更好
- 浅谈敏捷管理工具:看板(Kanban)
- php 通过sendcloud发送邮件附件功能
- CSDN蓝桥杯算法题——题解Java版本——切面条
- python通过jira的接口操作jira
- 1千6百多甲骨文汉字对应表ACCESS\EXCEL数据库
- 基于ESP8266称重式压力传感器(接入阿里云物联网平台)
- 繁体批量转换工具:支持繁体字和简体本地化互转
- sideEffects导致的全局样式消失
- 金山毒霸2014官方免费下载
- 【增长的数字(仿支付宝资产数字)】
- Authorware安装后的显示图标无法显示
- Dubbo3.0入门-Java版
- ssg20 虚拟服务器,SSG20硬件安装和配置指南-JuniperNetworks.PDF