小tip:巧用CSS3属性作为CSS hack

标签: css相关 background border-radius box-shadow css3 | 发表时间:2011-08-15 00:04 | 作者:张 鑫旭 逸川
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867

一、开篇小问题

题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现。
题目效果示意图 张鑫旭-鑫空间-鑫生活

计时思考……

二、思考中

————- 假设这是大家全神贯注思考的18分钟 ————————

……思考结束

三、问题引导

针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值。

于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对IE9+和其他浏览器。于是我们可能会看到类似下面的代码:

/*IE6 IE7 IE8*/
.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat;}
.rad{background-position:right -300px;}

/*IE9+以及其他现代浏览器*/
:root .rad, :root: .rad_in{background:none;}
:root .rad{border:1px solid #ccc; border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2);}
:root .rad_in{border:1px solid #fff; border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

确实,上面的代码可以让我们达到我们多希望的效果。但是,实际上,我们可以直接拿某些CSS3属性当CSS hack使用,可以实现同样的效果。

四、CSS3属性作为CSS hack

上述效果中,有浏览器冲突的CSS属性一个是border,另外一个就是background。由于IE6~8并不认识border-radius以及box-shadow,所以这两个属性纯属围观群众,不需要做处理。

所以上面的代码等同于:

/*IE6 IE7 IE8*/
.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat;}
.rad{background-position:right -300px; border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2);}
.rad_in{border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

/*IE9+以及其他现代浏览器*/
:root .rad, :root: .rad_in{background:none;}
:root .rad{border:1px solid #ccc;}
:root .rad_in{border:1px solid #fff;}

于是,CSS hack部分能够就是独眼龙看告示——一目了然了!

however,我们没有必要使用:root这个hack属性来针对现代浏览器和老一辈的IE浏览器分别写CSS样式,我们可以直接使用CSS3作为hack,区分不同的浏览器。

我们先直接看下CSS3 作为CSS hack下的代码:

.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat; background:rgba(0,0,0,0);}
.rad{border:1px solid rgba(204, 204, 204, 1); border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2); background-position:right -300px;}
.rad_in{border:1px solid rgba(255, 255, 255, 1); border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

RGBA颜色属于CSS3中的东西,IE6~8浏览器并不认识它。于是,我们把border的颜色表示用RGBA颜色,IE6~8浏览器就直接不认识这里的border属性,也就不会显示什么边框颜色了。同理,background属性也是使用RGBA颜色值,表示完全透明背景,直接在支持CSS3 RGBA浏览器下重置了前面的background,同时IE6~8浏览器下前面的图片background属性值因为不认识后面的background,所以,没有被重置,依旧坚挺地图片显示。

于是,虽然没有明显的CSS hack印记,我们还是实现了各个浏览器下大致类似的效果,其中的利器就是CSS3属性本身。

您可以狠狠地点击这里:巧用CSS3属性作为CSS hack实例页面

下图为IE7浏览器下的效果截图:
IE7浏览器下的demo效果截图 张鑫旭-鑫空间-鑫生活

四、末了闲话

本demo又拿张含韵小姐年轻时候的照片做例子了。大家不要要锁误会,我跟她没有一腿的,是很纯洁的。因为其照片正好是我实例的美女图片系列中的第一个,所以才频繁亮相。就像我们背英语单词,单词书上第一页的单词显然被背诵的次数要多是一样的道理。

That’s all, thanks!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867

(本篇完)

有话要说,点击这里发表评论。

相关 [tip css3 属性] 推荐:

小tip:巧用CSS3属性作为CSS hack

- 逸川 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867. 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

Tip中小三角的实现

- 溪梦 - WEB前端开发
前段时间专门研究了一下腾讯微博的Tip,很有意思. tip中的小箭头是用“◆”(encode为:◆)字符模拟的. 以前也写过类似的实现方案《用css的border属性实现三角》. 用“◆”字符模拟小三角有一个有点就是:比如tip有border时,也可以用两个绝对定位的“◆”字符模拟. 如图: 注意:最好根据您的实际情况设置“◆”的字体,我这里用了宋体,有棱有角真好.

HBase的一些应用设计tip

- - BlogJava_首页
1,对于HBase的存储设计,要考虑它的存储结构是:rowkey+columnFamily:columnQualifier+timestamp(version)+value = KeyValue in HBase,一个KeyValue依次按照rowkey,columnkey和timestamp有序.

weka特征预处理的一些tip

- - BlogJava-首页技术区
首先,提供两个地址,这里包含了全部的内容原文:. weka可以以目录形式读入数据. 然后再简单说一下weka在做文本特征内容处理时候需要注意的东西:. 声明一点,在weka的gui下是没法使用这个功能的:以目录形式读入数据. 首先,把要处理的数据写入到这样的目录结构下:. 然后在源码包下,命令行执行 java weka.core.converters.TextDirectoryLoader -dir text_example > text_example.arff.

玩mysql必须知道的10个tip

- - SQL - 编程语言 - ITeye博客
比如我的mysql是用源码方式安装在/usr/local/mysql. 自动:将/usr/local/mysql/share/mysql/mysql.server拷贝到/etc/rc.d/init.d/下,然后. chkconfig --add mysql.server就可以开机就启动mysql服务了.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.