初学者的CSS3: 颜色和不透明度

分享于 

8分钟阅读

Web开发

  繁體

介绍

它最初作为W3C推荐的一个版本发布,级联样式表一直作为定义内容呈现与标记的最佳方式。 近 15年后,CSS级别 3 ( CSS3 ) 为网络开发者提供新的设计特性。 我们将看看这些功能中最有趣和最流行的部分。

如果你还不熟悉 CSS,那么开始的好地方是 CSS for。 它为CSS语法。常用选择器和向HTML文件添加CSS的技术提供了方便的入门。

重要的是要注意,iseries仍处于工作草案状态,而不是最终的。 CSS3的一个新方面是提出的新特性已经被分解成超过 40个模块。 有些模块非常实验性,而其他模块则变得相当稳定,并且在新的浏览器版本中实现。 CSS3颜色模块插件已经成为W3C的实际推荐。

现在,大多数的浏览器都支持多个"符合标准"工作草稿中描述的功能。 在生产代码中使用这些特性之前,再次测试。测试和测试。

在本文中,我们将看一下nautilus颜色模块,因为它比它的他的建议和实验特性更实用。 事实上,就 2011年06月 而言,它是官方的W3C推荐。 除了传统的十六进制和RGB值以外,还可以直接指定不透明度和alpha通道。

HSL颜色

在传统上,在HTML标记和CSS中指定颜色的方法有很多种。 这些包括:

  • 彩色关键词( aqua,黑色,蓝色,紫红色,灰色,绿色,橙色,红色,红色,橙色,橙色,橙色,橙色,橙色,白色和黄色)
  • 十六进制值
  • RGB值

下面是一些快速示例:

.keyword { color: white; }
.shorthex { color: #FFF; }
.longhex { color: #FFFFFF; }
.rgb1 { color: rgb(255, 255, 255); }
.rgb2 { color: rgb(100%, 100%, 100%); }

CSS3增加了通过色调。饱和度和轻( HSL ) 值来指定颜色的能力。

.example { color: hsl([hue], [saturation], [light]); }
.implemented { color: hsl(240, 50%, 80%); }

色调代表颜色轮周围用度数表示的颜色。 W3C文档提供了一些有用的色调和饱和度值,可以供参考,而且还有许多在线工具来生成色调值和颜色。

饱和度代表百分比颜色,其中 0%是完全饱和的( 灰度),100%是完全饱和的( 选择的颜色在所有的vibrant中)。

光代表颜色的亮度百分比,其中 0%为无亮度( black ),100%为所有亮度( 白色)。

experimenting HSL颜色选取器( ),可以选择一种颜色,然后 copy-and-paste/或者 rgb/rgba表示,用于实验HSL颜色的一个伟大工具。 ( 根据建议和链接,向成员 HasmoreJohn。)

这里我们有几个例子展示了蓝色( 色调= 240 ) 文本以及不同级别的饱和。

#left { color: hsl(240, 0%, 50%); }
#center { color: hsl(240, 50%, 50%); }
#right { color: hsl(240, 100%, 50%); }

这相当于文本的以下颜色呈现:

Saturation.png

同样,我们可以调整亮度值:

#left { color: hsl(240, 100%, 0%); }
#center { color: hsl(240, 100%, 50%); }
#right { color: hsl(240, 100%, 100%); }

结果如下所示:

Lightness.png

这样,你就可以在CSS中指定元素颜色的五种不同方式。 我刚刚演示了文本的颜色,但当然也适用于任何可以采用颜色样式和边框等它的他元素。

至于调色板选择和口味。 我把这留给读者练习。

不透明度和渐变

CSS3的另一种颜色相关特性是支持alpha通道和透明度。 基本上,这可以控制任何元素的透明度- 从文本到全部 div - 从完全透明到完全透明。

演示,让我们从一个包含一些文本的简单 div 开始。

<divid="container1"><spanid="left">I</span><spanid="center">&hearts;</span><spanid="right">Opacity</span></div>

我们将从一个没有透明度设置的示例开始,然后我们将添加一个变化,用于整个 div。 ( 注意,我为清晰度留下了一些样式,例如宽度。对齐方式等等。)

#noopacity { background: silver; }
#basicopacity { background: silver; 
 opacity: 0.7;-moz-opacity: 0.7;-webkit-opacity: 0.7;-khtml-opacity: 0.7; }

你可以看到,我们使用了不透明度设置。 不透明度值范围从 0.0 ( 完全透明) 到 1.0 ( 完全不透明)。 这种情况下,我们将不透明度应用到整个 div。文本和所有。 我们还包括 -moz-webkit-khtml 前缀设置,以与 Firefox。Safari/Chrome 和遗留Safari浏览器实现兼容。 结果如下所示:

basicopacity.png

那不是真正的CSS3。 然而,CSS3确实允许将不透明度指定为RGBa或者HSLa颜色设置中的alpha通道。 在这种情况下,你可以为设置而不是使用rgb或者for来设置,并为alpha通道( 不透明度) 值添加第四个参数。 例如让我们将不透明度应用到div的background:

#rgbaopacity { background:rgba(192, 192, 192, 0.7); }

结果是直接的。注意本例中的文本保持完全不透明度,而 background 变得透明。

rgbaopacity.png

渐变是你可以开始使用的另一个purequery特性,虽然实现不同,但你需要应用浏览器的特定。 然而,各种渐变实现确实接受颜色规范,使用保留颜色关键字的所有CSS3技术到RGBa和。

#lineargradient {
 background: -moz-linear-gradient(top, silver 0%, white 100%);background: -webkit-gradient(
 linear, left top, left bottom, from(silver), to(white));}

在这种情况下,我们只从银色过渡到白色。 但是,完全可以使用alpha通道在渐变中使用透明度。

#container5 {
 background: -moz-linear-gradient(
 top, rgba(192, 192, 192, 0.8), rgba(255, 255, 255, 0.0));background: -webkit-gradient(linear, left top, left bottom, from(
 rgba(192, 192, 192, 0.8)), to(rgba(255, 255, 255, 0.0)));}

在这里你可以看到标准线性梯度和从半不透明银转换为完全透明白色的版本。

gradients.png

CSS代码变得比较复杂,但是在指定垂直。水平和径向渐变时,使用多种颜色和水平。

有关渐变语法和你可以使用的其他特性的更多信息,请参见使用渐变开发人员文档和CSS3梯度管理器 Webkit.org 文档。


COL  color  CSS3  OPA  不透明度  
相关文章