/ CSS

使用CSS3实现Faux列

这是一个CSS3的小技巧,不使用图片便实现Faux Columns。边栏在布局中的问题是它不能随着内容的扩展而延伸到相等的高度。常规的方法是创建一个图片背景应用到内容的父容器上。本文将介绍如何使用CSS3渐变实现相同的效果。

旧的方法

先来回顾一下让边栏背景沿着页面延伸的常规方法。根据来自Alistapart的文章,作者使用了一个几像素高的背景图片,图片上的背景颜色和内容栏、边栏的宽度一样,如下图:

[caption id="attachment_110" align="aligncenter" width="500" caption="Dan Cederholm创建的Faux列"]Dan Cederholm创建的Faux列[/caption]

背景图片应用在内容栏和边栏的容器上并垂直重复:

[css]
background: url(images/bg.jpg) repeat-y;
[/css]

这种方法在网页设计中已经使用了6年了,很不错,对吧?

使用CSS3实现

CSS3的渐变属性是一个很了不起的技术,我们可以用这个属性实现想要的效果,取代图片来加速网站。使用CSS3,可以生成超过两种颜色的背景。回到边栏背景上来,我们将使用2种颜色生成容器背景并分隔成两列。

[caption id="attachment_113" align="aligncenter" width="490" caption="CSS3渐变实现Faux列"]CSS3渐变实现Faux列[/caption]

针对Webkit浏览器使用的代码:

[css]
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.70, #FFFFFF));
[/css]

上面声明的“Color-stops”决定渐变中每个颜色的过渡点,简言之,黑色从容器左边70%开始然后过渡,白色从容器30%的地方开始填充。如果不指定颜色过渡点,默认为50%。

如果指定相同的过渡点:

[css]
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));
[/css]

结果如下:

[caption id="attachment_112" align="aligncenter" width="490" caption="CSS3渐变实现Faux列"]CSS3渐变实现Faux列[/caption]

上面的color-stop表明:左侧应该在渐变长30%的点填充黑色,但是白色也是从30%的点开始填充,所以没有两种颜色混合的空间。

针对Firefox的样式:

[css]
background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);
[/css]

一点说明

因为Opera不支持CSS3渐变、Internet Explorer的渐变滤镜没有颜色过渡点(color-stop)功能,所以这个技术仅对Firefox和Webkit浏览器有效。

当然,在CSS渐变被普遍支持之前,可以通过背景图片来为不支持的浏览器预留退路。

[css]
background: url(images/bg.jpg) repeat-y;
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));
background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);
[/css]