原文链接：http://www.qianduan.net/css3-image-styles.html

一些上流的CSS3图片样式

神飞 发表于 24. Sep, 2011, 分类: CSS , 46 条评论 »
标签：before & css3 & 伪元素 & 圆角 & 渐变
译自：CSS3 Image Styles
中文：CSS3图片样式
请尊重版权，转载请注明来源，多谢～～

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1

2

3

4

5

6

7

8

9

10

11

12

13

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

	$("img").load(function() {

		$(this).wrap(function(){

			return '<span class="image-wrap ' + $(this).attr('class') + '"

				style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';

		});

		$(this).css("opacity","0");

	});

});

</script>

输出

上面的脚本将会输出下面的HTML代码：

1

2

3

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">

	<img src="data:image.jpg" style="opacity: 0;">

</span>

圆形图片(见 demo)

现在，图片被用作背景图了，你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解，可以阅读下Basics of CSS3，也可以搜索一下前端观察。

CSS

1

2

3

4

5

.circle .image-wrap {

	-webkit-border-radius: 50em;

	-moz-border-radius: 50em;

	border-radius: 50em;

}

卡片风格(见 demo)

下面是一个像卡片的图片风格，用了多个inset box-shadow。

CSS

1

2

3

4

5

6

7

8

9

.card .image-wrap {

	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

浮雕风格 (见 demo)

通过一点儿改变，我可以将卡片风格转换为浮雕。。。

CSS

1

2

3

4

5

6

7

8

9

.embossed .image-wrap {

	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

软浮雕风格 (见 demo)

和浮雕风格真的很像，我只是加了1px的虚化～～

CSS

1

2

3

4

5

6

7

8

9

.soft-embossed .image-wrap {

	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

剪贴画风格(见 demo)

同样只是inset box-shadow，我可以让它看起来像剪贴画。

CSS

1

2

3

4

5

6

7

8

9

.cut-out .image-wrap {

	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

变形和发光 (见 demo)

这个例子中，我为图片外容器增加了变形。mouseover的时候，它将从圆角形状变为圆形，然后增加了发光效果。发光效果通过多重box-shadow实现。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.morphing-glowing .image-wrap {

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

 

.morphing-glowing .image-wrap:hover {

	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

 

	-webkit-border-radius: 60em;

	-moz-border-radius: 60em;

	border-radius: 60em;

}

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

.glossy .image-wrap {

	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

 

.glossy .image-wrap:after {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 50%;

	top: 0;

	left: 0;

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

 

	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));

	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);

}

倒影 (见 demo)

这个例子中，我将遮罩渐变移动到底部，于是它就成了倒影。。。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.reflection .image-wrap:after {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 30px;

	bottom: -31px;

	left: 0;

 

	-webkit-border-top-left-radius: 20px;

	-webkit-border-top-right-radius: 20px;

	-moz-border-radius-topleft: 20px;

	-moz-border-radius-topright: 20px;

	border-top-left-radius: 20px;

	border-top-right-radius: 20px;

 

	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));

	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);

}

 

.reflection .image-wrap:hover {

	position: relative;

	top: -8px;

}

光泽和倒影(见 demo)

这个例子中，我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

.glossy-reflection .image-wrap {

	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

 

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

 

.glossy-reflection .image-wrap:before {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 50%;

	top: 0;

	left: 0;

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

 

	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));

	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);

}

 

.glossy-reflection .image-wrap:after {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 30px;

	bottom: -31px;

	left: 0;

 

	-webkit-border-top-left-radius: 20px;

	-webkit-border-top-right-radius: 20px;

	-moz-border-radius-topleft: 20px;

	-moz-border-radius-topright: 20px;

	border-top-left-radius: 20px;

	border-top-right-radius: 20px;

 

	background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));

	background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);

}

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.tape .image-wrap {

	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);

	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);

	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);

}

 

.tape .image-wrap:after {

	position: absolute;

	content: ' ';

	width: 60px;

	height: 25px;

	top: -10px;

	left: 50%;

	margin-left: -30px;

	border: solid 1px rgba(137,130,48,.2);

 

	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));

	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);

	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);

}

变形和着色 (见 demo)

在下面的这个例子中，我用了 :after元素来在mouseover的时候添加发光渐变。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

.morphing-tinting .image-wrap {

	position: relative;

 

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

 

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	border-radius: 20px;

}

 

.morphing-tinting .image-wrap:hover {

	-webkit-border-radius: 30em;

	-moz-border-radius: 30em;

	border-radius: 30em;

}

 

.morphing-tinting .image-wrap:after {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

 

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

 

	-webkit-border-radius: 30em;

	-moz-border-radius: 30em;

	border-radius: 30em;

}

.morphing-tinting .image-wrap:hover:after  {

	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));

	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);

}

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.feather .image-wrap {

	position: relative;

 

	-webkit-border-radius: 30em;

	-moz-border-radius: 30em;

	border-radius: 30em;

}

 

.feather .image-wrap:after  {

	position: absolute;

	content: ' ';

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

 

	background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));

	background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);

}

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上，比如Chrome/Safari/Firefox等，而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现，IE9会有普通的圆角。

发挥你的创造力

正如你看到的，你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果，欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素，其实我更建议使用双冒号来实现，虽然单冒号有更多的浏览器支持，但是对于这些CSS3实现的效果来说，双冒号更安全一些。更多的原因，可以参考《:before和::before的区别》

[转：CSS3-前端] CSS3发光和多种图片处理的更多相关文章

  1. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  2. HTML5+CSS3前端开发资源整合

    HTML5+CSS3前端开发资源整合   推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...

  3. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  4. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  5. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  6. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  7. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  8. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  9. CSS3：CSS3 背景

    ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...

随机推荐

  1. BZOJ 4341 [CF253 Printer] 解题报告

    乍一看这个题好像可以二分优先度搞搞... 实际上能不能这么搞呢...? 我反正不会... 于是开始讲我的乱搞算法: 首先肯定要把任务按照优先度排序. 用一棵在线建点的线段树维护一个时刻是否在工作. 然 ...

  2. 【POJ】【3537】Crosses and Crosses

    博弈论 相当于放了x的位置,左右4格都不能再放x了,谁无处可放就输. n<=2000 直接枚举后继状态,暴力求SG函数即可. 例: 0000000->x..0000 / .x..000 / ...

  3. 解决asp.net mvc中*.resx资源文件访问报错

    个人笔记 问题重现 在asp.net mvc中,使用资源文件会出现一个问题,例如: 紧接着我进入视图界面,输入下面代码: <a href="javascript:void(0);&qu ...

  4. Sql注入中连接字符串常用函数

    在select数据时,我们往往需要将数据进行连接后进行回显.很多的时候想将多个数据或者多行数据进行输出的时候,需要使用字符串连接函数.在sqli中,常见的字符串连接函数有concat(),group_ ...

  5. Memcache安全配置

    Memcache安全配置 瞌睡龙 · 2014/01/20 17:59 0x00 Memcache简介 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash ...

  6. HDOJ 1284 钱币兑换问题

    转自:wutianqi http://www.wutianqi.com/?p=981 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1284 tag:母 ...

  7. Codeforces400D Dima and Bacteria

    题意:给你一个无向有权的图,图上的点被分成了几类,对于同类的点你需要判断它们之间相互的最短距离是不是0.满足这个条件之后要输出的是类与类之间的最短距离的矩阵.点给到10^5这么多,判断同类的点显然不能 ...

  8. hdu 1536/1944 / POJ 2960 / ZOJ 3084 S-Nim 博弈论

    简单的SG函数应用!!! 代码如下: #include<iostream> #include<stdio.h> #include<algorithm> #inclu ...

  9. 使用getScript()方法异步加载并执行js文件

    使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(u ...

  10. My_Plan part1 小结

    数位DP AC十道题目以上 成就达成 八月份!三个月!想想就令人兴奋呢 开始写总结啦 貌似简单的数位DP只需要改改模板就可以啦 就按照我的做题顺序开始总结吧 先是学习了一发模板:http://www. ...