原文链接:http://www.qianduan.net/css3-image-styles.html
一些上流的CSS3图片样式
直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。
问题 (见 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 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> |
输出
上面的脚本将会输出下面的HTML代码:
1 |
<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;"> |
圆形图片(见 demo)
现在,图片被用作背景图了,你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解,可以阅读下Basics of CSS3,也可以搜索一下前端观察。
CSS
1 |
.circle .image-wrap { |
卡片风格(见 demo)
下面是一个像卡片的图片风格,用了多个inset box-shadow。
CSS
1 |
.card .image-wrap { |
浮雕风格 (见 demo)
通过一点儿改变,我可以将卡片风格转换为浮雕。。。
CSS
1 |
.embossed .image-wrap { |
软浮雕风格 (见 demo)
和浮雕风格真的很像,我只是加了1px的虚化~~
CSS
1 |
.soft-embossed .image-wrap { |
剪贴画风格(见 demo)
同样只是inset box-shadow,我可以让它看起来像剪贴画。
CSS
1 |
.cut-out .image-wrap { |
变形和发光 (见 demo)
这个例子中,我为图片外容器增加了变形。mouseover的时候,它将从圆角形状变为圆形,然后增加了发光效果。发光效果通过多重box-shadow实现。
CSS
1 |
.morphing-glowing .image-wrap { |
发光遮罩 (见 demo)
发光渐变遮罩是通过:after伪元素实现的。。。
CSS
1 |
.glossy .image-wrap { |
倒影 (见 demo)
这个例子中,我将遮罩渐变移动到底部,于是它就成了倒影。。。
CSS
1 |
.reflection .image-wrap:after { |
光泽和倒影(见 demo)
这个例子中,我同时使用了:before和:after伪元素来实现带倒影的光泽效果。
CSS
1 |
.glossy-reflection .image-wrap { |
胶带风格(见 demo)
这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。
CSS
1 |
.tape .image-wrap { |
变形和着色 (见 demo)
在下面的这个例子中,我用了 :after元素来在mouseover的时候添加发光渐变。
CSS
1 |
.morphing-tinting .image-wrap { |
羽化边缘的圆形(见demo)
发散渐变也可以用作遮罩层来实现圆形羽化效果。
CSS
1 |
.feather .image-wrap { |
浏览器支持
本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上,比如Chrome/Safari/Firefox等,而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现,IE9会有普通的圆角。
发挥你的创造力
正如你看到的,你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果,欢迎通过评论与大家分享。
PS,本文中使用:before/:after来实现伪元素,其实我更建议使用双冒号来实现,虽然单冒号有更多的浏览器支持,但是对于这些CSS3实现的效果来说,双冒号更安全一些。更多的原因,可以参考《:before和::before的区别》