[示例]如何使用CSS和介绍工具进行渐变(如何使用线性梯度)

“我知道CSS可以实现什么渐变,但我从未使用过它。”
“我不知道你可以使用什么样的场景。”

在CSS中询问“渐变”,实际上上述意见不是坦率的印象。即使没有渐变技能,您也可以设计和除了专业致力于设计的人之外,有些人可以选择学习技能。

但是,如果您知道渐变技巧,设计宽度将传播。在创建按钮或背景设计时,是单色设计是一种很好的技能。这次,我们将解释如何实现看起来复杂的CSS的渐变设计。特别是,我们正在为第一次学习的人写作,因此如果您已经知道,您可以跳过。

这也完成: [对于初学者]仔细解释如何编写CSS(样式表)

实现梯度设计的发电机

实际上,在尝试在网络上表达渐变时,无需从头开始编码所有内容。有一件方便的东西,称为“生成器”,可自动生成代码。渐变颜色的选择对于那些没有学习设计的人来说是一个麻烦的问题,但如果你使用它,你将减轻其负担。引入典型的发电机。

CSS渐变

CSS渐变发电机

抓住

韦克赖特

实现渐变的两个代表性背景值

如果您有这种有用的发电机,有些人会认为您需要学习渐变。但是,在不知道机制的情况下处理代码没有危险。所以,接下来,让我们了解这个“工作”。特别是,在渐变中经常使用以下两件事。两者都被用作背景属性的值。

描述
线性梯度() 创建线性渐变。
径向梯度() 创造一个椭圆渐变。

如何使用linear-gradient()

基本

要实现梯度,请为背景属性设置“线性梯度”。这可以实现线性灰度。以下是基本的。 ()只需在()中填充两种颜色代码。

background: linear-gradient(カラーコード1, カラーコード2);

例如,放置任何颜色代码。

background: linear-gradient(#FBAB7E, #F7CE68);

结果显示如下:

好吧,有些人可能很好,但有些人希望改变颜色的职位和变化的变化。它也可以得到支持。

颜色变化位置

您还可以设置颜色更改的位置。在这种情况下,将半宽度空间留在颜色代码旁边并放置一个数字。此数字是常见的,以采取PX或%的单位。此数字表示指定颜色代码占用的共享数量,下一个颜色是下一个颜色的开头。尝试指定100%如下所示。

background: linear-gradient(#FBAB7E 100%, #F7CE68);

然后,“#fbab7e”总的来说。换句话说,没有渐变效应。

然后让我们将值“100%”更改为“50%”。

background: linear-gradient(#FBAB7E 50%, #F7CE68);

然后,梯度已开始以由背景假定的宽度的50%。

从这里开始,从起始点0到50%是用#f13f79绘制的,51到100%将是梯度。让我们来应用它来指定多种颜色。

多种颜色规格

渐变允许您指定多种颜色。例如,执行以下操作:用单个角分开颜色代码。

background: linear-gradient(#FA709A, #FBAB7E, #F7CE68);

这将如下。

所以,这里还添加颜色放置规范。

background: linear-gradient(#FA709A 30%, #FBAB7E 60%, #F7CE68 100%);

从0%到30%的变化,“#fa709a”,从“#fbab7e”到“#fbab7e”,从“#fbab7e”到“#fbab7e”到“#fbab7e”的更改为“#fbab7e”这是一个指令更改为#f7ce68。

方向和角度(斜坡)规格

上述示例代码已将颜色从上到下更改,但也可以指定此方向。如果指定了这一点,则有两种方式和两种方式来查看上下,向右,左右,通过设置倾斜角度来实现对角线。

在上下开始,左右

当设置梯度方向时,这可以通过定位来实现。默认设置是从上到下的渐变,但如果要更改此方向,请将关键字放置,指示诸如“顶部”,“右”,“底部”和“左”的位置。那时,将“to”放在关键字前面。例如,如下放置“左”。这意味着“#fbab7e(起始点)和#f7ce68(终点)被放置在左右”。另外,将“到方向”。它不会出现在末端和中间。

background: linear-gradient(to left, #FA709A, #FBAB7E, #F7CE68);

它如下所示:

在这里,让我们通过关键字来总结定位。

意义 位置
从上到下 到底
从右到左 向左
从底部到顶部 到达顶点
从左到右 对吧

设置倾斜角度时

除了上述外方的方向规格也有一个斜率。在这种情况下,使用角度指定的程度。例如,让我们以45度的角度表达渐变。按照以下开始放置“45deg”。

background: linear-gradient(45deg, #FA709A, #FBAB7E, #F7CE68);

然后,您可以看到渐变在45度方向的左下角实现。

那么如果你想要这个在左上角开始这个怎么办?在这种情况下,请指定135deg。

background: linear-gradient(135deg, #FA709A, #FBAB7E, #F7CE68);

如果要启动右下角,请设置315deg(-45deg)。

background: linear-gradient(315deg, #FA709A, #FBAB7E, #F7CE68);

如果要启动右上角,请设置-135deg。

background: linear-gradient(-135deg, #FA709A, #FBAB7E, #F7CE68);

供应商前缀的设置

嗯,有很多情况下供应商前缀支持多个浏览器。在这种情况下,需要注意设置方向和角度设置。这是因为方向设置和角度设置与没有供应商前缀的情况不同。

方向设置

例如,如果您没有供应商前缀设置,如果要展开右侧方向渐变,则设置“右侧”。

background: linear-gradient(to right, #FA709A, #FBAB7E, #F7CE68);

但是,如果您有供应商前缀,请按如下方式写入。换句话说,如果您想在正确的方向部署渐变,请记住您要设置。

background: linear-gradient(to right, #FA709A, #FBAB7E, #F7CE68);
background: -moz-linear-gradient(left, #FA709A, #FBAB7E, #F7CE68);
background: -webkit-linear-gradient(left, #FA709A, #FBAB7E, #F7CE68);

角度设置

90角= vendorp反射的deg

例如,如果要设置135度,则供应商前缀角度设置如下执行。

background: linear-gradient(135deg, #FA709A, #FBAB7E, #F7CE68);
background: -moz-linear-gradient(-45deg, #FA709A, #FBAB7E, #F7CE68);
background: -webkit-linear-gradient(-45deg, #FA709A, #FBAB7E, #F7CE68);

径向梯度()

基本语法

接下来,让我们了解如何使用radial-gradient()。基本用法不会随线性梯度()而更改。以下是一个基本语法。

background: radial-gradient(中央の色, 外側の色); 

设置()中的两个代码,如下所示:

background: radial-gradient(#05FBFF, #1E00FF);

然后,从中心到圆圈显示渐变。

多种颜色设置和颜色布置

您可以在线性渐变()中指定或放置多种颜色。方式是一样的。首先,让我们指定多种颜色。因此,可以通过用逗号写多种颜色来分级多种颜色。

background: radial-gradient(#05FBFF, #8EC5FC, #1E00FF);

接下来,让我们设置从该位置改变颜色的位置。这也不会随着线性梯度()而改变。渐变持续到30%后获得100%。

background: radial-gradient(#05FBFF 30%, #1E00FF);

指定多种颜色并设置其排列。以下是“#05fbff”,“#05fbff”,“#05fbff”从0%到30%,“#08aeea”,“#08aeea”从“#08aeea”到“#08aeea”它的变化到1e00ff。

background: radial-gradient(#05FBFF 30%, #08AEEA 60%, #1E00FF);

等级到图像

好吧,我看到图像上的渐变设计。让我们这次创造出来。首先,将以下设计创建为样本。

首先,如下准备HTML。

<div class="main">
  <div class="background">
     <h1>Sample</h1>
  </div>
</div>

接下来,使用图像设置将此HTML和渐变设置为。让我们先显示图像。设置图像如下。 “中心顶部”表示图像的起点。此外,在情况下设置背景颜色。

.main{
  background: url(./img/gradient-img.jpg), center top, #05FBFF;
  height: auto;
}

然后设置类的“背景”的渐变。但是,查看梯度颜色的颜色设置,我们使用RGBA()代替如上所述的彩色线。实际上,除了颜色代码之外,这种用法也是可能的。使用RGBA()的原因是因为透明度是可能的。

.background{
  background: linear-gradient(45deg, rgba(254, 225, 64, 0.7) 0%, rgba(250, 112, 154, 0.7) 100%);
  background: -moz-linear-gradient(45deg, rgba(254, 225, 64, 0.7) 0%, rgba(250, 112, 154, 0.7) 100%);
  background: -webkit-linear-gradient(45deg, rgba(254, 225, 64, 0.7) 0%, rgba(250, 112, 154, 0.7) 100%);
  height: auto;
}

最后设计角色。

h1{
  color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 13;
  text-shadow: 2px 4px 2px rgba(150, 150, 150, 1);
}

结果,进行以下设计。

概括

最后,图像被评分,但令人惊讶的是有用的。特别是当在图像上放置字符时,如果没有给出任何东西,你将无法非常读取角色,并且将是业余服装设计。此时,您可以避免渐变技能。这不限于图像。它还用于每个部分的按钮装饰和颜色设计。该网站从未完全是你的想法“酷!”如果你用一点点设计接近它,你不会迷失自己。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。