一些上流的CSS3图片样式
来源:互联网 发布:ps软件那里下载 编辑:程序博客网 时间:2024/04/29 07:02
中文: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编写)。
输出
上面的脚本将会输出下面的HTML代码:
圆形图片(见 demo)
现在,图片被用作背景图了,你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解,可以阅读下Basics of CSS3,也可以搜索一下前端观察。
CSS
卡片风格(见 demo)
下面是一个像卡片的图片风格,用了多个inset box-shadow。
CSS
浮雕风格 (见 demo)
通过一点儿改变,我可以将卡片风格转换为浮雕。。。
CSS
软浮雕风格 (见 demo)
和浮雕风格真的很像,我只是加了1px的虚化~~
CSS
剪贴画风格(见 demo)
同样只是inset box-shadow,我可以让它看起来像剪贴画。
CSS
变形和发光 (见 demo)
这个例子中,我为图片外容器增加了变形。mouseover的时候,它将从圆角形状变为圆形,然后增加了发光效果。发光效果通过多重box-shadow实现。
CSS
发光遮罩 (见 demo)
发光渐变遮罩是通过:after伪元素实现的。。。
CSS
倒影 (见 demo)
这个例子中,我将遮罩渐变移动到底部,于是它就成了倒影。。。
CSS
光泽和倒影(见 demo)
这个例子中,我同时使用了:before和:after伪元素来实现带倒影的光泽效果。
CSS
胶带风格(见 demo)
这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。
CSS
变形和着色 (见 demo)
在下面的这个例子中,我用了 :after元素来在mouseover的时候添加发光渐变。
CSS
羽化边缘的圆形(见demo)
发散渐变也可以用作遮罩层来实现圆形羽化效果。
CSS
浏览器支持
本文的方法可以在支持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图片样式
- CSS3 图片样式
- 用CSS3的clip-path样式进行图片的裁剪
- css3 2D图片转动样式
- css3 transition hover图片样式切换
- css3样式的经典实现
- CSS3圆圈旋转的样式
- CSS3设置checkbox的样式
- CSS3的布局样式相关
- 常见的css3动画样式
- 常见的css3动画样式
- 常见的css3动画样式
- css3的一些总结
- css3的一些总结
- linux下dd命令的上流用法
- linux下dd命令的上流用法
- linux上流量控制的相关文章
- 实现DFS之“油田”
- ios开发NavigationController学习心得
- 第三周作业 算法概论
- 恭喜您成为 2014 年度 Microsoft MVP !
- C常量,宏,枚举及函数
- 一些上流的CSS3图片样式
- 完整java开发中JDBC连接数据库代码和步骤
- Android:实现一种浮动选择菜单的效果
- Hdu 1059 Dividing (多重背包)
- 按钮的基类
- 一篇提及如何通过串口读取并提取GPS信号的论文
- linux权限管理之su与 sudo详解___username is not in the sudoers file
- C++ STL Rotating
- java反编译查看字节码