您的位置:银河官方网站 > 新闻动态 > 使用渐变工具拖拉出一个粉红到白的径向渐变图

使用渐变工具拖拉出一个粉红到白的径向渐变图

2019-10-11 04:33

Photoshop制作粉色的斜面立体字效果 (载入中...)

;

简介 - Introduction

渐变在网站中常常用到:如果你想使得(按钮,标题等)有生气,就可以使用渐变。虽然你应该尽量少的使用渐变,以免网页看起来像是圣诞树一样。以往我们常常使用背景图片来给我们的界面添加渐变效果,而且这种方式还是可以的,但是这种方式显得不那么灵活。因为,每次你想要改变渐变的颜色,大小以及渐变的方向时,你都不得不在图片编辑软件中对图片做修改。
CSS Image Values and Replaced Content Module Level 3允许我们以编程的方式在元素上创建渐变。你可以通过代码来改变渐变的颜色,方向等,并且是如此的灵活。例如,你可以在元素上以不同的百分比设置color stops;当元素的尺寸发生改变时,渐变也会做出调整来适应。
在说明书中定义了2种渐变, linear gradients and radial gradients。在前一篇文章中,我们阐述了线性渐变

  • CSS3 linear gradients。这篇文章将关注于径向渐变。我们将会阐述所有的基础语法,并会在接近文章尾部的地方,看一下repeating-radial-gradient

来源:ps123.net 嘉嘉

调色的工具多种多样,前面我们介绍了之中的主要五种,几乎已经可以调出所有的色彩风格,但每一种调色工具都是有其存在的价值和意义,

线性渐变语法回顾 - Linear gradient syntax recap

做个回顾,线性渐变的语法其实是相当简单的:

background-image:linear-gradient(
    to bottom right,
    rgb(255, 0, 0),
    rgb(100, 0, 0) 50%,
    rgb(50, 0, 0) 75%,
    rgb(150, 0, 0)
);

在括号中,第一行设置了渐变的方向,紧接着设置了一系列的color stops,渐变在这些color stops之间自然地流动。上面的示例所创建的渐变 如下图所示:

图片 1

Screen Shot 2017-07-09 at 6.57.26 PM.png

注意:Oper, Firefox, IE的最新版本全都支持线性渐变的当前语法,即不用使用前缀,然而基于WebKit的浏览器仍然使用旧的语法。为了兼容旧版本的浏览器和基于WebKit的浏览器,你应该包含带开发商前缀。
需要注意的是:

  • to关键字的方向 与 不带to关键字的方向 之间的区别。具体请参考我所翻译的上篇文章。
  • 当为方向指定角度时,你所使用的角度时罗盘角。以往的0度是数学中的0度,而现在的零度是以背景区域的中心为起点,指向竖直向上的方向 为0度。

完整的代码示例如下:

background-image:-webkit-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-moz-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-ms-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-o-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:linear-gradient(to bottom right, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));

效果图

而作为调色工具中的渐变映射,在后期中的使用也很常见,本文将给大家详细讲解渐变映射的使用原理与方式。

径向渐变语法 - Radial gradient syntax

径向渐变稍微有点复杂,但是也不需要话费太多时间来适应。其语法形式如下:

radial-gradient(
    `size shape` at `position`,      //  `是分隔符,没有实际的语意
    `colour stops`
);

就像线性渐变一样,Opera,Firefox和IE全都支持最新的‘不带前缀的径向渐变语法’。基于WebKit-的浏览器仍使用旧式的语法(需要带前缀)。旧式的径向渐变语法也是使用相同的values,但是形式不同:

radial-gradient(
    `position`,
    `size and shape`,
    `colour stops`
);

所以兼容所有浏览器的示例 看起来是 这样子的:

-webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));

上面示例会创建一个柔和的蓝色渐变(从元素的中心向外渐变),结果如下图:

图片 2

现在让我们来深入了解下:postion, size and shape, colour stops

图片 3

一、渐变映射使用原理

position

径向渐变发散的起始位置position指定了:径向渐变的中心点的位置(渐变从哪个位置向外发散)。position位于at后,position可以是关键字和unit values,指定position的方式 和 指定CSS中background-position的方式基本一致。

  • circle at left top意味着:把渐变的中心点放置在左上角。

图片 4

  • circle at 20% 70%意味着:把渐变的中心点放置在 距离元素左侧20% 距离元素顶部70% 的位置。

图片 5

  • circle at 70px 80px意味着:把渐变的中心点放置在 距离元素左侧70px 距离元素顶部80px 的位置。

图片 6

  • circle at 0%意味着:把渐变的中心点放置在 元素的左侧边 垂直居中。如果你只指定了一个值,该值会被认为是水平方向上的值,垂直方向上的值默认为50%(也就是垂直居中)。

图片 7

  • 如果你没有为gradient position设置任何值,gradient position会默认为元素的背景区域的中心,即是center center或者50% 50%

图片 8

1、首先创建一个新文档,在这里我使用了650*450px的尺寸,使用渐变工具拖拉出一个粉红到白的径向渐变图层。

在使用时,渐变映射首先会将照片去色变成黑白,然后从明度的角度分为:暗部、中间调和高光。

size and shape

渐变的size and shape是通过使用 显式的sizeshape关键字组合的方式,或者隐式的sizeshape关键字组合的方式 来设置的。

图片 9

在渐变映射中有一个颜色渐变条,这个颜色渐变条从左到右对应的就是照片暗部、中间调和高光区域。

Explicit sizes

当使用显式的size时,你所设置的2个values 是gradient shape的水平半径和垂直半径。如果你指定了circle关键字 和 一个值,你会得到一个圆。如果你指定了ellipse关键字和2个值,或者仅仅指定了2个值,你会得到一个椭圆。你可以使用任意的CSS units,只要在它所处的情况中合理即可,但是你不能使用百分比。

  • 40px circle意味着:使 渐变的形状是圆的,而且半径是40px。

图片 10

  • 2em 4em ellipse意味着: 使 渐变的形状是椭圆,水平方向的半径是2em,垂直方向的半径是4em。

图片 11

  • 注意:如果你没有设置任何值,会设置ellipse cover为默认值。(下面的部分会介绍cover关键字)

图片 12

也就是说如果我们把这个渐变条填充上两个颜色,越靠近左边的颜色将是照片暗部的颜色,越靠近右边的颜色将是照片高光的颜色,而中间过渡区域则是中间调的颜色。

Implicit sizes

当使用隐式的size时,你可以使用若干个不同的关键字。这些关键字指定了:你想让渐变的形状circle, ellipse的最外沿接触到容器的最近角最远角,还是最近边最远边(最近,最远都是相对于position的位置而定的)。在这个示例中,我们使button为正方形,并且设置渐变中心的位置为:水平35%,垂直25%。

  • closest-side circle at 35% 25%会使渐变的最外沿接触到 距离渐变中心最近的 元素的那条边。把circle更换为ellipse,会使渐变的最外沿接触到 距离渐变中心最近的 元素的那2条边。你可以使用关键字contain来代替closest-side

图片 13

图片 14

  • closest-corner circle at 35% 25%会使渐变的最外沿接触到 距离渐变中心最近的 元素的那个角。把circle更换为ellipse,也是同样的效果。

图片 15

图片 16

  • farthest-side circle at 35% 25%会使渐变的最外沿接触到 距离渐变中心最远的 元素的那条边。把circle更换为ellipse,会使渐变的最外沿接触到 距离渐变中心最远的 元素的那2条边。

图片 17

图片 18

  • farthest-corner circle at 35% 25%会使 渐变的最外沿接触到 距离渐变中心最远的 元素的那个角。不管是circle还是ellipse,你都可以使用关键字cover来代替farthest-corner

图片 19

图片 20

如下图:

Colour stops

在径向渐变语法的最后部分,你可以指定至少2个color stops - 这些color stops指定了沿着渐变方向的不同位置上 是 什么颜色,并且浏览器会填充color stops之间的颜色。你可以在沿着渐变方向的不同位置上 使用任意的单位,只要合理即可。你也可以使用不同的方式指定颜色(16进制颜色值,关键字,rgb,rgba等等)。每个color stop之间是 使用逗号分隔的。

  • #ff0000, #000000: color stop最简单的设置是 只使用2个颜色。当color stop后 没指定position时,浏览器会 默认第一个color stop0%位置,第二个color stop100%位置(100%即是在最外沿)。

图片 21

  • rgb(255,0,0), rgb(150,150,150) 50%, rgb(0,0,0): 这儿我们有3个color stop,并且是使用RGB来设置颜色的。第一个颜色 在渐变方向上的位置为0%,最后一个颜色 在渐变方向上的位置为100%,但是我们还有一个不同的color stop50%位置。

图片 22

  • rgb(255,0,0) 20px, rgb(150,150,150) 40px, rgb(0,200,0) 60px, rgb(0,0,0) 80px: 4个color stop,这次使用pixel values 在渐变方向上 放置 颜色值。你会发现:如果你不指定在渐变起始位置和结束位置上的颜色值,起始位置的颜色值 会采用第一个color stop的颜色值,同样地 结束位置的颜色值 会采用最后一个color stop的颜色值。

图片 23

让我们来看个实际使用中的示例:

background-image:-webkit-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-moz-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-ms-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-o-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:radial-gradient(circle at 30% 40%, rgb(255,0,0), rgb(0,0,0));

上面示例的效果(活生生的示例) 如下图:

图片 24

当鼠标hover在按钮上时,按钮稍微下陷。当按钮被点击时,它们会深深的陷入。我通过在鼠标的hover,active状态下 使用各种inset box shadow来达到效果。

图片 25

Repeating radial gradients

和线性渐变的方式一样,你可以通过使用相关的repeat property 来创建repeating-radial-gradient
repeating-radial-gradient使用渐变工具拖拉出一个粉红到白的径向渐变图层,允许我们以编程的方式在元素上创建渐变。仅仅是采用 你为径向渐变设置的方式,并重复这个方式 到元素的边界。

background:-webkit-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-moz-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-ms-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-o-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:repeating-radial-gradient(30px circle, #009, #0000FA 50%, #009);

效果如下图:

图片 26

使用红到青的渐变映射:

总结- Summary

我希望 这篇文章给了你:在你的设计中开始使用径向渐变 所需要知道的所有知识点!请让我们知道:你认为Opera's implementation怎么样

  • 回馈总是有帮助的,不论好坏?
    你在这儿看到的 并不是径向渐变的使用极限。你可以 在任何你可以使用图片的地方 使用径向渐变,所以你应该尝试在border-image, list-style-image...中 使用径向渐变。
  • 本文翻译自:https://dev.opera.com/articles/css3-radial-gradients/
  • 转载请注明出处

图片 27

我们可以发现这张图几乎已经失去了它之前的所有颜色,因为在使用渐变映射后,首先会将照片变成黑白,

然后左边红色对应着衣服中最暗的部分,右边青色则对应着照片中高光部分,中间部分则对应着红到青的过渡部分。

二、渐变映射与色彩平衡的区别

在前面我们说到渐变映射会将照片从明度的角度分为:暗部、中间调和高光,然后颜色渐变条再一一对应上色,所以可能有些人会误以为渐变映射是简版的色彩平衡,其实不然。

其中最大的区别就是,使用色彩平衡不会将照片去色,它还是会在原来的色彩基础上进行颜色的调整,而渐变映射则会先去色,然后再着色,这样就会失去原来的色彩。

其实渐变映射调整的暗部,中间调和高光没有色彩平衡简单,易于控制,一般情况使用渐变映射都需要降低不透明度,或者配合使用混合模式。

图片 28

三、渐变映射与渐变的区别

渐变映射与渐变有着本质的区别。

首先,渐变是一个单独图层,正常情况下不会对其它的图层有影响,而渐变映射是一个调整图层,

它的存在是基于底部下面的图层存在的,也就是说它必须要作用于下面的图层,不能独立存在。

其次,渐变图层从左边到右边只代表着图层色彩分布的从左边到右边,

而渐变映射中从左边到右边分别代表着暗部,中间调和高光。

图片 29

四、渐变映射的使用方法

在前面的例子中我们发现渐变映射如果直接使用时效果并不理想,所以一般情况我们还需要配合其它的方式使用,一种是通过改变图层的不透明度,将图层的不透明度降低,

这样一方面原本的色彩可以得到有效的保留,另一方面,我们通过渐变映射叠加的颜色也可以显得比较柔和。

另一种方式则是配合使用混合模式,这种方式在后期中同样非常常用的,一般情况我们主要配合使用正片叠底、滤色以及柔光。

图片 30

五、总结

渐变映射使用原理

渐变映射与渐变,色彩平衡的区别

渐变映射的简单使用方式

本文由银河官方网站发布于新闻动态,转载请注明出处:使用渐变工具拖拉出一个粉红到白的径向渐变图

关键词: