分类 学习分享 下的文章

CSS3 线性渐变-不同渐变角度

在第一个例子里,我们没特别指定方向或角度,渐变方向默认是至上而下。相当于这样子写:

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

角度值放在渐变信息里开始处,用颜色用逗号隔开。你可以通过改变这些关键字来指定渐变方向从top,bottom,left或者right。

figure2.pngFigure 2: altering the angle keyword between top, bottom, left, and right, respectively.

你也可以改变top left, top right, bottom left 和 bottom right,实现对角渐变。

另一方式就是设定角度值,例如

0度等于left

90度等于bottom

180度等于right

270度等于top

360度等于left

上述让你清楚地知道角度值的工作原理。试着去玩玩,看看你所实现出来的渐变。

继续浏览CSS3 线性渐变-色标

CSS3 线性渐变

据我们所知,我们都曾使用过颜色渐变来美化站点和为站点增色,而如果你想创建一个具有精制外观的按钮、面板、进度条或者其他UI界面,那么颜色渐变是必要。

到目前为止,我们一般是平铺背景图片来制造渐变效果。其CSS语句很简单,用Photoshop, Fireworks或其他图形工具来做一个渐变图片也不是一件难事。然后这种方式是相当地不灵活。假设你想要不同的配色方案或者其他渐变效果,你需要重返你的图形工具制作另一张图片。那么如果你可以完全使用CSS控制颜色渐变岂不是更好?

CSS Image Values and Replaced Content Module Level3中CSS3提出了解决方法:这些模块定义了CSS渐变,它允许我们用纯CSS打造任何渐变。在这篇文章,我将提出怎样使用线性和多次线性渐变。目前Opera 11.10+, Firefox 3.6+, Safari 5.03+ 和 Chrome 7+支持。

Note:径向渐变暂不被Opera支持,且效果也有点不同。我们在后期会把它加入支持当中且为它单独撰写一篇文章。IE9目前还不支持CSS渐变,但是你可以在IE9中用SVG渐变来弥补IE9这个缺陷。

Gradients demo例子中,我提供了一些简单的例子供你试验。在通读以下的章节后,你可以把这些示例下载下来,试试修改不同的参数看看都有什么好玩的效果。在代码里,你会发现我给不同的版本加上不同的供应商前缀来支持不同浏览器。这个例子能通过新版的opera, Firefox, Safari和Chrome。

做一个基本的线性渐变,需要提供一个起点值和结束值,例如

background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));

如Figure1所示,创建了一个从顶到底的深灰色到浅灰色的渐变。这边我只是把它应用到一个article元素里,你可以应用到任何你所喜欢的block元素上。

figure1.pngFigure 1: A really basic CSS3 linear gradient.

为什么渐变是写到background image而不是看起来更为合理的background color?这是出于灵活和使用者的习惯考虑。过去我们总是通过CSS背景图片来实现渐变,而现在只要你喜欢,你可以使用CSS将颜色渐变应用于多个图片背景层。

继续浏览CSS3 线性渐变-不同渐变角度

最近回复

  • unicac: 很久没打理了。。。
  • kuye: 你的博客做得也不错(...
  • unicac: 哈哈,是咯!
  • 柠檬园主: 还在更新的独立博客,...
  • 18通讯网: 虽然过程很辛苦,但你...
  • fenny: 这个尴尬的年龄,谈爱...

分类