栏目导航
热点推荐
- 网页表单设计:提高表单可用性的1
- 网站设计必须充满诗意 用户体验
- 网页元素设计和网页转场设计
- 50个制作网站的诀窍
- 高性能网站建设的黄金法则
- 网站用户体验七十六个要点分享
- 网页图片大小自适应方法
- 最容易犯的10个HTML标签错误
- 网页设计事半功倍的构图技巧
- 网页用户体验:网页注册表单设计
- 精美网页专题页面设计的经验总结
- 15 个第三方Web 表单资源
阅览排行
设计心得:玩转CSS3色彩
www.jz123.cn 2010-03-16 来源: 中国建站 责任编辑(袁袁) 我要投递新闻
译自:Playing Around with CSS3 Colors
中文:玩转CSS3色彩
传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。
CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能,而IE直到Internet Explorer 9才会开始支持一些CSS3属性。
Opacity
这其实是一个旧属性,令人惊奇的是,它被IE的当前版本支持——尽管是以一种比较复杂的方法。
Opacity将整个CSS 对象变透明,所有的子元素的透明度也会适当的继承。官方的语法如下:
opacity: [0-1的小数];
所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它,老的浏览器还是需要一些定制的代码,就像IE浏览器一样。
目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的:
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;
啊,稍等!IE怎么办?好吧,IE的确完全不支持这个,但是它使用了一个私有的滤镜。传统的方法简短扼要:
filter:alpha(opacity=50);
请注意对于IE我们需要使用从0到100的整数,而不是像opacity属性那样的小数。郁闷的是,Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个,这是很长的一个:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
当然,如果你想支持旧的IE浏览器,你将不得不使用上面的那个短的,这也就意味着如果要兼容绝大部分浏览器,你需要总共六条CSS语句。
PS:事实上,Safari从1.2版本(2004年)就开始支持opacity属性了,KHTML内核的Safai基本很难再找到了,而事实上,Konqueror从未支持过-khtml-opacity属性,所以请不要再使用它(我在翻译的时候考虑到原文的完整性,所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity,而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微软的天才作品啊!不过请注意,如果你要同时使用filter和-ms-filter,请注意将-ms-filter写在filter的前面。——神飞
RGBa
下面让我们讨论一下RGBa。RGBa是对原始的RGB的扩展,它加入了第四个参数:alpha通道。alpha通道参数采用0 到1之间的小数,就像opacity那样。使用RGBa而不是opacity的优势是,当使用RGBa的时候,透明不会被应用到子元素。这也就一位着,你可以在一个透明对象里面使用一个完全不透明的子对象,而当你使用opacity的时候,透明对象的子元素也是透明的。
使用RGBa不能再简单了:
div {
background: rgb(255,0,0); /* The old one */
background: rgba(255,0,0,0.5); /* The new one */
}
正如你看到的那样,我们渐渐通过添加一个字母和另外一个参数就将一个实体的红色变为半透明的红色了。RGBa被Firefox 3+、Safari 3+、Chrome 1.0+以及Opera 10支持。但IE还是不支持。CSS-Tricks 提供了一个使用私有滤镜的方法来让它在IE下也可以工作:
上一篇:网页布局设计:使用数学中的模数精确布局 下一篇:设计心得:提高设计水平的9大秘诀