`

深入理解css3-gradient斜向线性渐变/

 
阅读更多

 

深入理解CSS3 gradient斜向线性渐变

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=3639

一、问题没有想得那么简单

提问,使用CSS3 gradient渐变,在一个400*300div层上实现一个(100px, 100px)(200px, 200px)由红到黄的斜向线性渐变,该如何实现?

//zxx: 这里的讨论CSS3渐变都是基于新式规范写法,且忽略私有前缀

我们可能知道水平渐变的实现,类似这样:

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果可能近似这样:

 

很自然的,那从(100px, 100px)(200px, 200px)应该就是从左上角开始,应该是这样子:

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果可能近似这样:

 

哇哦,帅气,恩,应该就是我们想要的效果了!——

这显然是不可能的,如果真这么简单,我也不会拿出来说了~

我们打开Photoshop等绘图软件,画一个符合上面要求的渐变,看看效果是:
photoshop作图
作图的效果 张鑫旭-鑫空间-鑫生活

与上面的CSS实现对比一下:

 

红色区域大小明显差很多,怎么回事?

我只能告诉你,事情远没有你想的那么简单!

二、动用懒惰的慢思维,从头开始

我们遇到问题,如果第一反应是求助别人,get的是表层的东西;如果自己深入分析,get的往往是实在的东西。第一种人看似好学,实际是个懒惰的人,勤快地使用轻松、耗费精力较少的快思维,这种人适合做销售、公关,并不适合做技术;但并不表示他赚的票子会少。

题外话点到为止。深吸一口气,来,吸…………好,现在我们重新审视CSS3 gradient线性渐变的标准写法(因webkit不支持,这里省略了to):

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面这种CSS语法我们经常见到,可能有人看不懂具体的意思,其实上面的些符号含义与正则表达式有很多一致之处:

  • []在正则中表示一个字符类,这里,你可以理解为一个小单元。
  • |表示候选。也就是“或者”的意思,要么前面的,要么就后面的。
  • ?为量词,表示0个或1个,言外之意就是,你可以不指定方向,直接渐变色走起。例如:
    background:linear-gradient(red, yellow);

    就是从上往下的红黄条纹效果。

  • +也是量词,表示1个或者更多个。因此,终止颜色是不可缺少的。例如:linear-gradient(red)是酱油命,白板。
  • <>中的是关键字,主要是让开发人员知道这里应该放些什么内容。

线性渐变关键字
1. angle
angle表示渐变的角度,然而,这个角度变化千万不能想当然理解,举个例子:
如果angle45deg, 还是由红到黄的渐变,下面那个图是正确的表现:
渐变角度与呈现

A呢还是B呢还是C呢还是D呢?

这个要比女友拿着四件衣服让你说哪个好看要简单吧。

5秒钟倒计时,5, 4, 3, 2, 1, ……

好了,答案是:C

亲爱的朋友,回答正确了木有?

我保证,很多人都回答错了(包括我自己),为什么会犯错?原因很简单,“熟悉感效应”。

想让人们相信谬误有个可靠的方法,那就是不断重复,因为人们很难对熟悉感和真相加以区别。——丹尼尔·卡尼曼

我们,譬如我,非常多次地接触CSS3 transform中的旋转,rotate(45deg)效果就是元素默认态顺时针旋转45°;于是,这种熟悉感会让我们觉得渐变的旋转也应该如此。默认渐变从上到下,那么旋转45°应该是D啊(参见下gif示意),怎么会是C呢?
旋转45度的效果 张鑫旭-鑫空间-鑫生活

photoshop与CSS3走得越来越近了,我们可以从photoshop中找到答案。

45度渐变在photoshop中的效果

从上图那个圈中的圆环可以看出,渐变的角度与旋转的那个角度完全不是一回事。线性渐变的这个角度为圆心为起点的发散方向。大图示意就是:
渐变方向与角度的关系 张鑫旭-鑫空间-鑫生活

2. side-or-corner
side-or-corner中文意思就是“边或角”,可选值有:

[left | right] || [top | bottom]

表示,你可以有如下的写法或组合:
leftrighttopbottomleft topleft bottomright topright bottom. 分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)

其中的left top(从左上往右下)正好我们一开始的例子使用了,现在看看,稍微想想,就知道我们使用错了!

显然,从(100,100)(300,300)是个45度倍数角;而left top的角度是直奔右下角的,而容器是400*300,显然,不是45度倍数角。根据我们上面对angle的认识,角度应该是-45°-45°为圆心网右下方向45度的一条线,正好符合从(100,100)(300,300)的方向!

3. color-stop
渐变关键颜色结点,语法为:

<color> [ <percentage> | <length> ]

中文解释就是,颜色值+空格+百分比或长度值。例如red 100px. 记住,这里的颜色值只能一个,因此, red 100px 100px是完全错误滴!

OK,现在我们定义重新梳理了一遍,现在实现一开始的渐变效果应该OK了吧,试试呗~

如下CSS:

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}

如下效果:

 

肉眼看上去好像那么回事,我们来对比下photoshop中的正确实现:
作图的效果 张鑫旭-鑫空间-鑫生活

额~  貌似还是不对啊,而且差得更远了,怎么回事???

我只能告诉你,事情远没有你想的那么简单!

三、深入理解线性渐变的角度坐标

上面的代码我们稍微修改下,加上-webkit前缀以及-moz前缀看看:

{background-image:-webkit-linear-gradient(-45deg, red 100px, yellow 200px);}

如下效果(非webkit内核截图):

 

哎呀,貌似角度对了嘛!咋回事。

这是Chrome浏览器下的一个奇葩问题,最近,Chrome浏览器已经去掉了CSS3渐变的私有前缀,但是,其中的解析也有了写变化:

background-image:-webkit-linear-gradient(-45deg, red, yellow)

background-image:linear-gradient(-45deg, red, yellow)

在Chrome浏览器下的渐变方向居然是相反的!45deg是正常的。

Firefox浏览器下也是如此,有前缀和没有前缀方向相反!咋回事?

原因很简单,CSS3目前还是草案阶段!

从浏览器去掉前缀前后的变化可以推测,之前,W3C的渐变坐标是与photoshop中一致的,但是,后来,由于某些原因,修改了。

至于什么原因,根据我草草的查找,可能与下面几个关键字之一有联系:animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。

目前的规范是这么说的:

using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.

也就是:

使用angles
参数释义如下,‘0deg’指向上面,同时正角度顺时针旋转,因此‘90deg’指向右边。

我们画一下就是:
css3线性渐变现在的坐标系

可见,目前,规范的渐变坐标系与photoshop是有差异的。

同时,也告诫我们,私有前缀可不能乱用哦!

面向未来,显然我们都要跟着规范走,于是有CSS:

{background-image:linear-gradient(135deg, red 100px, yellow 200px);}

效果为:

 

与PS图比一下:
作图的效果 张鑫旭-鑫空间-鑫生活

我去~怎么还是有出入啊?——红色区域大小明显不一样嘛!

我只能告诉你,事情远没有你想的那么简单!

四、深入理解角度坐标与位置关系

对于斜向线性渐变,点到点的渐变可不是直接把点的横坐标放上去就可以的。因为当渐变倾斜的时候,渐变的起止点的坐标也发生变化了。下图是官方规范的一张示意图,演示的是45deg渐变的起止点以及方向。

45deg渐变示意图

记住一个关键点,渐变的起点和终点(默认)在过中心的渐变线的垂直线上,于是,我们就可以确定起点与终点的位置了。按照这个理解,我们就可以画出400*300 div135deg起始点在哪里,然后再确定(100,100)(200,200)的位置就轻松多了。

如下示意图:
100,100到200,200渐变位置示意图

一图顶前言,反正上面这张图我是看懂了。于是,我们的坐标起止点值其实就变成了,黑色括弧的长度以及紫色括弧的长度值分别多少!

虽然很多人不喜欢数学,但是几何应该都还不错,我们来一起算一下……

//zxx: 长度计算中……

结果为,起点:

100 * Math.sqrt(2) = 141.4213562373095;

终点为:

200 * Math.sqrt(2) = 282.842712474619;

CSS用上:

{background-image:linear-gradient(135deg, red 141.4213562373095px, yellow 282.842712474619px);}

效果:

 

与PS的效果比对下:
作图的效果 张鑫旭-鑫空间-鑫生活

哇哦,一样了唉!鼓掌!
鼓掌

五、结束语

好好学习,天天向上!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=3639

(本篇完)

分享到:
评论

相关推荐

    纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式.zip

    首先,让我们了解CSS3中的两种主要类型的渐变:线性渐变(linear-gradient)和径向渐变(radial-gradient)。线性渐变沿直线方向从一种颜色平滑过渡到另一种颜色,而径向渐变则以圆心为中心,颜色从内向外扩散。 1....

    纯css3 gradient颜色渐变立体文字特效代码

    首先,让我们理解CSS3中的两种主要类型的渐变:线性渐变(linear-gradient)和径向渐变(radial-gradient)。线性渐变沿着一个方向平滑地过渡颜色,而径向渐变则从一个中心点向外扩散颜色。在"纯css3 gradient颜色...

    HTML5&CSS3网页制作:CSS3线性渐变.pptx

    本篇将重点讲解 CSS3 中的线性渐变,它使得创建平滑色彩过渡效果变得简单直观。 线性渐变(Linear Gradients)在 CSS3 中被引入,允许设计师定义颜色在二维空间中的平滑过渡。这比以前使用背景图像的方法更为灵活和...

    css-gradient-generator:ZtMCSS背景渐变生成器的源代码-css source code

    `css-gradient-generator`是一个专门用于创建自定义CSS渐变背景的工具,其源代码为我们提供了深入理解渐变工作原理以及如何通过编程实现它的机会。 1. **渐变类型** CSS提供了两种主要的渐变类型:线性渐变...

    H5 CSS3 渐变的使用

    渐变在CSS3中有两种类型:线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。这两种渐变都能通过指定颜色的起点和终点,以及它们之间的过渡方式,创造出多种色彩变化的效果。 1. **线性渐变**: 线性...

    HTML5 css3渐变按钮代码.rar

    首先,让我们深入理解CSS3渐变的概念。CSS3中的渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient)。在这个例子中,我们主要关注线性渐变,它是在一个方向上从一种颜色平滑过渡到另一种颜色。线性...

    CSS3简约大气背景渐变特效.rar

    "CSS3简约大气背景渐变特效.rar"这个压缩包文件,显然包含了一套关于如何创建这种效果的资源,尽管没有具体的标签信息,但我们可以深入探讨一下CSS3背景渐变的基本概念和实现方法。 一、CSS3渐变类型 1. 线性渐变...

    css背景色渐变

    1. `linear-gradient`函数:这是创建线性渐变的主要方法。它接受两个主要参数,一是渐变的方向,二是颜色停止点。例如: ```css background-image: linear-gradient(to right, red, yellow); ``` 这会从左到右(`to ...

    纯CSS3实现的日落时渐变色背景动画效果源码.zip

    1. **线性渐变(Linear Gradients)**:CSS3允许我们定义线性渐变作为背景,可以指定方向,如从上到下、从左到右等。例如: ```css background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00); ``...

    纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)

    在本文中,我们将深入探讨如何使用纯CSS实现颜色渐变,包括线性渐变、环形渐变以及彩虹效果。 ### 1. CSS渐变色的基本概念 CSS渐变分为两种类型:线性渐变(Linear Gradients)和环形渐变(Radial Gradients)。...

    关于中心渐变与多种线性渐变实现的方法,现发给大家参考下

    在本文中,我们将深入探讨“中心渐变”和“多种线性渐变”的实现方法,这些概念主要应用于图形用户界面(GUI)设计和前端开发中。 中心渐变,也称为径向渐变,是从一个点向外扩散的颜色变化效果。这个点可以是图形...

    蓝色斜纹背景CSS3模板

    蓝色斜纹背景可能使用了`linear-gradient`线性渐变或者`repeating-linear-gradient`重复线性渐变来构建。例如,代码可能会这样写: ```css body { background-image: linear-gradient(45deg, #00bfff 25%, ...

    css3做的渐变和分列效果

    CSS3 渐变主要包括线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。它们允许我们在元素的背景中创建平滑的颜色过渡,而非单一或固定的色彩。 1. **线性渐变**:线性渐变沿着一个方向从一种颜色平滑...

    浅析几个CSS3常用功能的写法

    在本文中,我们将深入探讨CSS3的一些常用功能,包括圆角、盒状阴影和线性渐变,这些都是现代网页设计中不可或缺的元素。由于不同浏览器对CSS3的支持程度不一,因此在实际应用中需要考虑兼容性问题。 首先,我们来看...

    第22章 CSS3渐变效果

    在本章中,我们将深入探讨CSS3中的渐变效果,这是一种强大的视觉设计工具,能够为网页增添丰富的动态感和美学价值。CSS3渐变不仅包括简单的颜色过渡,还能实现复杂的角度、径向和多色渐变,使得网页设计更加灵活且...

    CSS-Gradient-Creator:使用HTML,CSS,Javascript的简单CSS渐变生成器

    3. **学习资源**:对于初学者来说,这个生成器也是一个学习工具,可以帮助理解CSS渐变的工作原理。 4. **JS基础实践**:生成器的实现基于JavaScript,因此了解其内部工作原理也可以增强JavaScript技能,特别是DOM...

    react-GradientLab是一款采用React制作的渐变色选择器

    这些资源可以帮助你更深入地理解组件的工作原理,以及如何自定义和扩展它以满足特定需求。如果你需要调试或修改组件,可以查看源码,学习其设计模式和实现方式。 总之,react-GradientLab是一个实用的React组件,它...

    DIV框渐变填充实现源代码

    1. **线性渐变**(Linear Gradient) 线性渐变沿着一个方向从一种颜色平滑过渡到另一种颜色。在CSS中,可以使用`linear-gradient()`函数来创建。基本语法如下: ```css div { background-image: linear-gradient...

    css-doodle.js螺旋状动画特效.zip

    同时,为了创建螺旋形状,开发者可能使用了径向渐变(radial-gradient)或者线性渐变(linear-gradient)。这些渐变可以用于背景图像,以形成从一点到另一点颜色的变化,通过巧妙地配置渐变角度和位置,可以模拟出...

    css3按钮渐变动画特效.zip

    CSS3支持线性渐变(linear-gradient)和径向渐变(radial-gradient)。线性渐变沿着一个方向平滑地过渡颜色,而径向渐变则从一个中心点向外扩散颜色。在按钮设计中,这些渐变可以用于创建从一种颜色平滑过渡到另一种...

Global site tag (gtag.js) - Google Analytics