使用CSS3来定位一个倾斜的图片

2016-02-17 04:32 39 1 收藏

下面是个超简单的使用CSS3来定位一个倾斜的图片教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - 平面设计 】

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

先看看效果:

使用CSS3来定位一个倾斜的图片,PS教程,图老师教程网

点击查看我们要做的效果.请记住这个事例对于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来定位一个倾斜的图片,PS教程,图老师教程网

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" li a href="#"img src="images/2.jpg" li a href="#"img src="images/3.jpg" li a href="#"img src="images/4.jpg" li a href="#"img src="images/5.jpg" li a href="#"img src="images/6.jpg"/ul

 

使用CSS3来定位一个倾斜的图片,PS教程,图老师教程网

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

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

 

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

使用CSS3来定位一个倾斜的图片,PS教程,图老师教程网

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

 

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

第五步:现在要进入本教程的重点了.使用CSS3 box-shadow 这个属性给图片添加阴影.为了让图片的顺序排列好,我们要给图片加个类.还要加个"相对"属性.

ul class="gallery"
 li ahref="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"img src="images/1.jpg" li ahref="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"img src="images/2.jpg" li ahref="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"img src="images/3.jpg" li ahref="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"img src="images/4.jpg" li ahref="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"img src="images/5.jpg" li ahref="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"img src="images/6.jpg"/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来定位一个倾斜的图片,PS教程,图老师教程网

第七步:因为每张图片在位置上的不同,我们可以为其设置个性的风格.比如说:z-index 和 旋转 的属性.

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

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

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

第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕.

使用CSS3来定位一个倾斜的图片,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1578523.html

延伸阅读
标签: Web开发
CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值...
标签: Web开发
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。 上一篇文章:CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。 Saturation 值是一个百分比:0%是灰度,100%饱和度最高 ...
标签: Web开发
说到CSS3相信都并不陌生了,但是对于应用来说,却鲜见有人体验,尤其是在大型网站开发过程中,还是在保守地使用当前的CSS语言编写代码。 在一些个人性质的网站和博客中,已经有不少人开始使用CSS3进行网站的编写,总之CSS 3的广泛应用是需要多方面的支持才可以变的更加广泛。 这里是7个不错的CSS3 代码生成工具,或许对你学习CSS 3会有很大的...
标签: Web开发
There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification . Realistically, you won’t be able to use these on your everyday clien...
标签: Web开发
Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。   不用说,如果要找...

经验教程

882

收藏

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