兼容各浏览器的CSS倒影效果

标签: 浏览器 css 效果 | 发表时间:2012-12-27 01:47 | 作者:afeiqiang
出处:http://blog.csdn.net
无需flash,完全用css就可以做出超炫的图片倒影效果。网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大家分享一下。最终完成的效果



新浏览器的实现
指的是firefox、chrome和IE9。新浏览器都支持CSS3新添的transform属性,所以实现倒影效果非常简单。从下面的代码看到,各家浏览器对transform的实现有点不同
     -webkit-transform: scaleY(-1);     /* webkit内核浏览器的实现,例如safari */
     -moz-transform: scaleY(-1);     /* firefox 的实现 */
     -ms-transform: scaleY(-1);     /* IE 的实现 */
     -o-transform: scaleY(-1);     /* Opera的实现 */

HTML
<div class="wrap">
     <div class="image"><img src="1.jpg" /></div>
     <div class="down">
          <div class="reflection"></div>
          <div class="overlay"></div>
     </div>
</div>


CSS
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
     -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
     -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
     transform: scaleY(-1);
     opacity:0.5;     
     filter:alpha(opacity='50');
     }
.overlay{position: relative;width:421px;height:180px;bottom:149px;
     background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
     background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
     filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}


在倒转的图片上面还加了一个DIV.overlay层,做出渐变的效果,使倒影看起来更真实。

兼容旧浏览器的实现
考虑到还有相当多的人在使用旧版浏览器,程序员绞尽脑汁为这部分人做兼容。这里指的是IE7/IE8。IE6怎么办?提示用户升级浏览器吧。
旧IE不支持transform属性,可以使用滤镜 filter:flipv 来生成图片倒转,但会跟IE9的transform冲突。所以要用到各种 hack 来解决。修改后的CSS如下,添加了IE9 hack,覆盖掉上面的filter:flipv的属性。

body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
     -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
     -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
     transform: scaleY(-1);
     opacity:0.5;     
     filter:flipv alpha(opacity='50');     /*ALL IE*/
     }
@media all and (min-width:0) {
     .reflection{filter:alpha(opacity='50') \0/;} /*IE9*/
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
     background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
     background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
     filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}


运行一下,在各版本的浏览器能看到最终的效果了。




作者:afeiqiang 发表于2012-12-27 1:47:25 原文链接
阅读:67 评论:0 查看评论

相关 [浏览器 css 效果] 推荐:

兼容各浏览器的CSS倒影效果

- - CSDN博客推荐文章
无需flash,完全用css就可以做出超炫的图片倒影效果. 网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大家分享一下. 指的是firefox、chrome和IE9. 新浏览器都支持CSS3新添的transform属性,所以实现倒影效果非常简单.

Javascript和CSS浏览器兼容总结

- Keel - ITeye资讯频道
这篇文章重点总结了Javascript和CSS浏览器兼容性问题. document.form.item 问题. 代码中存在 document.formName.item(“itemName”). 这样的语句,不能在FIREFOX下运行. 改用 document.formName.elements["elementName"].

CSS对浏览器的兼容性

- - CSDN博客Web前端推荐文章
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码. 而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名,并且需要写到页面的最上面. input、br、img等为常用自闭合标签,需要加入“/”进行闭合,例如“”;其他闭合标签需要进行闭合,例如“
....
”.

浏览器大 PK,用 CSS 画哆啦A梦

- jary - 谷奥——探寻谷歌的奥秘
某日本高手用 css3 画了机器猫哆啦A梦. 点击这里进入查看具体的现实效果. 如果你查看页面源代码的话会发现这一切全部是css写的. 有意思的是由于不同的浏览器对 css3 的支持程度不同,效果也大不相同,上面即是不同的浏览器对比图:. 四个浏览里面 Chrome 的支持度最高,不仅圆角、阴影一应俱全,甚至连眼睛都还会动 @@;Firefox 3.6 次之,除了眼睛不会动之外都和 Chrome 相当;Opera 则是少了阴影;至于 IE8… 呃… IE9 什么时候出来.

前端设计中的浏览器CSS Hack汇总

- Myheimu - UED TEAM,用户体验设计,web前端开发
CSS Hack是我们解决浏览器兼容性(尤其是IE各版本)问题的常用手段. CSS Hack的手法可以说是五花八门,使用时经常混淆. js代码 /***** Selector Hacks ******/. /* IE6及更低版本浏览器 */. /* IE8, FF, Saf, Opera (除了IE 6、7的所有浏览器) */.

css 控制div高度自适应浏览器的高度

- - 博客园_首页
css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.

Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS

- - 博客园_梦想天空
  Conditioniz 是一个快速、轻量级(3KB)的 JavaScript 工具,用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件. Conditioniz 从它的 jQuery 前身重建,现在速度要快50%. 结合类名添加和 Conditionizr 集成的脚本和样式加载功能,允许你为不同的浏览器指定想加载的脚本和样式.

现代浏览器性能优化-CSS篇

- - SegmentFault 最新的文章
我来填坑了,CSS篇终于写出来了,如果你没看过前面的JS篇,可以 在这里观看. 众所周知,CSS的加载会阻塞浏览器渲染或是引起浏览器重绘,目前业界普遍推荐把CSS放到 中,防止在CSS还没加载完,DOM就已经绘制出来了,造成CSS加载完成后的重绘. 那在现代浏览器中我们有没有办法提高首屏渲染速度那.

【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册

- - 博客园_首页
  浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异. 因此,浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册,那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊.

浏览器加载和渲染html的顺序-css渲染效率的探究

- - CSDN博客互联网推荐文章
1.浏览器加载和渲染html的顺序. 1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.