Tagged

RGBA

A collection of 5 posts

css3

玩转CSS3色彩

译自:[Playing Around with CSS3 Colors](http://www.lateralcode.com/playing-with-css3-colors/) 中文:[玩转CSS3色彩](http://www.qianduan.net/playing-with-css3-colors.html) 请尊重版权,转载请注明来源,多谢!- - - - - - 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像`rgb(171,205,239)`。 CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari

css3

使用CSS3和RGBa创建超酷的按钮

呃,看到这个标题,我们可以首先将IE系浏览器无视了。 我承认,我是有极简主义倾向的,我希望能够使用最少的代码和图片做更多的事情。 虽然CSS3仅仅增加了少数新特性,但是这些属性却可以做很多有用的事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用CSS3的圆角、盒子阴影和文字阴影效果,同时使用RGBa色彩。 让我们先来看一下demo吧: 点击图片查看演示。 我们可以通过四步来做出这些漂亮的按钮: 1.按钮的基本设置 我们需要先设置一下按钮的基本样式,这里我们使用a标签,当然也可以使用input、button标签等,这里使用a标签是因为这三个标签中只有a标签支持:hover伪类。 .btn { display: inline-block;/thanks to ytzong/ /*display:block; float:left; margin:5px; */ padding: 4px 10px; font:bold 13px/180% Tahoma, sans-serif; color: #fff; text-decoration: none; overflow:

RGBA

RGBa色彩的浏览器支持

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手。 通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素: 声明一个保留颜色 并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。 div { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, 0.5); } 不过,这条退路在某些古董级浏览器中依然无效。 RGBa的浏览器支持情况 浏览器,

css

CSS3之旅:RGBa颜色

在CSS3中,RGBa 为颜色声明添加Alpha通道。这对于设计师来说是个非常好的消息,他们现在可以在单个元素上声明一个Alpha通道的百分比了。 对介绍不太感兴趣?直接看演示吧 为什么不是opacity? Opacity 已经被所有主流浏览器所支持了,尽管要使用不同的代码。 /* IE 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE5 - 7 */ filter: alpha(opacity=50); /* Everyone else */ opacity: .5; 那么你为什么还要哭鼻子呢?这个问题是,如果你在一个元素上设置了opacity ,那就意味着该元素的所有子元素也会被应用同样的设置……所以控制opacity实现非常棒的细节是颇为麻烦的事情的。你不能完全使用它,或者不得不借助于JavaScript. RGBa前来营救 基于CSS 颜色模型第三版的RGBA 颜色允许界面设计师为独立元素设置一个alpha通道。 RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。

css

CSS3系列教程:RGBA

使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。 RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。 浏览器兼容性 RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持,同样不需要前缀。 CSS3 RGBA 色彩 上面的效果有以下样式实现: div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; } div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; } div.rgbaL3 { background:rgba(153, 134,