CSS3颜色渐变应用方法总结附实例(上篇)

CSS3颜色渐变应用方法总结

在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变效果,用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中,Gradient(渐变)分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同,但最后是统一标准的:

 

CSS颜色线性渐变的语法:

  1. background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:

  1. /*  color-stop(percentage/amount, color) */
  2. color-stop(0.20, red)

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术,属于高级的CSS功能,于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器,就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况:

  1. #example1   {
  2.     /* 底色 */
  3.     background-color#063053;
  4.     /* chrome 2+, safari 4+; multiple color stops */
  5.     background-image:-webkit-gradient(linear, left bottombottomleft topcolor-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
  6.     /* chrome 10+, safari 5.1+ */
  7.     background-image: -webkit-linear-gradient(#063053#395873#5c7c99);
  8.     /* firefox; multiple color stops */
  9.     background-image: -moz-linear-gradient(top,#063053#395873#5c7c99);
  10.     /* ie 6+ */
  11.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
  12.     /* ie8 + */
  13.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
  14.     /* ie10 */
  15.     background-image: -ms-linear-gradient(#063053#395873#5c7c99);
  16.     /* opera 11.1 */
  17.     background-image: -o-linear-gradient(#063053#395873#5c7c99);
  18.     /* 标准写法 */
  19.     background-image: linear-gradient(#063053#395873#5c7c99);

注意,我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它:

  1. #example2   {
  2.     /* fallback */
  3.     background-color:#063053;
  4.     /* chrome 2+, safari 4+; multiple color stops */
  5.     background-image:-webkit-gradient(linear, left bottombottomrightright topcolor-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
  6.     /* chrome 10+, safari 5.1+ */
  7.     background-image:-webkit-linear-gradient(45deg, #063053#395873#5c7c99);
  8.     /* firefox; multiple color stops */
  9.     background-image:-moz-linear-gradient(45deg, #063053#395873#5c7c99);
  10.     /* ie10 */
  11.     background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
  12.     /* opera 11.1 */
  13.     background-image: -o-linear-gradient(45deg, #063053#395873);
  14.     /* The "standard" */
  15.     background-image: linear-gradient(45deg, #063053#395873);
  16. }

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹:

  1. /* example 3 - linear rainbow */
  2. #example3   {
  3.     /* fallback */
  4.     background-color:#063053;
  5.     /* chrome 2+, safari 4+; multiple color stops */
  6.     background-image:-webkit-gradient(linear, left bottombottomleft topcolor-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
  7.     /* chrome 10+, safari 5.1+ */
  8.     background-image:-webkit-linear-gradient(redgreenbluepurple, orange);
  9.     /* firefox; multiple color stops */
  10.     background-image:-moz-linear-gradient(topredgreenbluepurple, orange);
  11.     /* ie10 */
  12.     background-image: -ms-linear-gradient(redgreenbluepurple, orange);
  13.     /* opera 11.1 */
  14.     background-image: -o-linear-gradient(redgreenbluepurple, orange);
  15.     /* The "standard" */
  16.     background-image: linear-gradient(redgreenbluepurple, orange);
  17. }

关于IE对CSS颜色渐变技术的支持做一些说明:在早期IE是使用filter和-ms-filter语法实现渐变色,而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题:

  1. <!--[if lt IE 10]>
  2. <style>
  3. .gradientElement {
  4.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
  5.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
  6. }
  7. </style>
  8. <![endif]-->

上篇是关于CSS3颜色渐变语法的一些简单总结,下篇将分开详细为大家进行分享CSS颜色渐变的使用及相关案例。敬请关注。

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!