likes
comments
collection
share

【CSS】通过一组彩色笔掌握CSS颜色

作者站长头像
站长
· 阅读数 11

前言

本文主要内容: 通过创建三支彩色笔，较为清晰地掌握三种基础CSS设置颜色的方式以及设置不透明度、边框、阴影等

项目预览与分析

【CSS】通过一组彩色笔掌握CSS颜色

如上图是给出的三支彩色笔，我们当然可以使用同一种方式构建它们，但是在学习过程中，我还是会进行三种不同的CSS颜色表示方式来创建它们

涉及到项目的分析就变得很简单了，无非就是三个div，有着三个不同的颜色设置，所以可以初步得到html代码如下：

<div class="container">
  <div class="marker red">
  </div>
  <div class="marker green">
  </div>
  <div class="marker blue">
  </div>
</div>

笔的形状与位置

这个上一篇文章已经详细地说明了如何设置，所以这里一笔带过

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

给笔上基础色

首先是要给笔的内部上最基础的颜色，直接设置background-color即可。而这一步接下来将使用三种方式完成

使用rgb()给红笔上色

目前，有两种主要的颜色模型：用于电子设备的 叠加 RGB（红、绿、蓝）模型，以及用于打印的 消减 CMYK（青色、品红色、黄色，黑色）模型

根据fCC教程中给出的解释，颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化，所以对于红色来说，只要按照如下设置即可

.red{
  background-color: rgb(255,0,0);
}

使用#十六进制给绿笔上色

对于用#后跟着十六进制表示颜色的方式，实际上就是对rgb的缩写，00对应0,ff对应255

所以对于绿色来说，设置为background-color: #00ff00;

使用hsl()给蓝笔上色

hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度

想象一个色轮，色调红色是 0 度，绿色是 120 度，蓝色是 240 度。

饱和度指纯色的颜色强度从 0% 或灰色到 100%。

亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性。

所以对于蓝色来说，可以设置为background-color: hsl(240,100%,50%);

阶段性效果

直接经过这样简单的颜色拉满的设置后，可以得到如下效果 【CSS】通过一组彩色笔掌握CSS颜色

可以看到离最终效果还是有一定差距的，毕竟这样的效果直接使用red green blue就能获得，不能体现出 rgb hsl 等的优越性

进一步调整笔内部颜色

接下来需要进行进一步的操作，包括改变颜色和添加渐变两步

改变颜色

饱和度拉满的单颜色往往不是特别好看，所以可以在不同的颜色设置方法下进行不同的调和

  • 红笔：rgb(245, 62, 113)
  • 绿笔：#71F53E
  • 蓝笔：hsl(223, 90%, 60%)

直接使用给出的颜色，可以看到主体颜色已经发生了变化

【CSS】通过一组彩色笔掌握CSS颜色

添加渐变

笔的立体效果通过给背景添加渐变来完成，然而在这之前我们需要明确以下提示

要记住的一件事是 linear-gradient 函数实际上创建了一个 image 元素，并且通常与可以接受图像作为一个值的 background 属性配对

所以我们首先需要将三个设置颜色的类选择器的background-color修改为background

接着我们就可以对三支笔进行如下设置

  • 红笔：linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))
  • 绿笔：linear-gradient(#55680D, #71F53E, #116C31)
  • 蓝笔：linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))

补充一下渐变的语法

linear-gradient(gradientDirection, color1 color-stop, color2 color-stop, ...);

其中color-stop（颜色中间点）可以选择不加

阶段性效果

经过颜色和渐变的调整后，得到如下效果 【CSS】通过一组彩色笔掌握CSS颜色

可以看到我们已经完成了笔本身颜色的设置，至于立体感依旧不强则是还需要阴影的加持

添加笔套

在设置CSS样式之前，需要先在HTML文件中添加两个覆盖在笔上的div，以红笔的为例，如下

<div class="marker red">
  <div class="cap"></div>
  <div class="sleeve"></div>
</div>

至于为什么是两个div，原因在于需要将笔套移动至右边

接着再对cap和sleeve进行设置即可

设置笔套不透明度

一种是可以利用opacity进行直接的设置，0为完全透明，1为完全不透明

而另一种则是可以在设置颜色的同时，再添加一个属性进行设置，比如可以对sleeve进行如下设置：

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}

将rgb改为rgba，再在第四个参数处设置不透明度即可。于是可以得到如下效果

【CSS】通过一组彩色笔掌握CSS颜色

添加笔套上的纹路

无需再添加一个div，可以通过设置笔套的边框属性来实现

border-left: 10px double rgba(0, 0, 0, 0.75)

上面的几个参数分别设置了宽度，样式和颜色，于是就能得到如下效果 【CSS】通过一组彩色笔掌握CSS颜色

这样，我们距离完成就只剩一步了，通过添加阴影来进一步增强笔的立体感

添加笔的阴影

box-shadow 属性允许你在元素周围应用一个或多个阴影。 这是基本语法：

box-shadow: offsetX offsetY blurRadius spreadRadius color;

所以在这个例子中，我们可以分别进行如下设置，也可以从中看到不同的不透明度设置

  • 红笔：0 0 20px 0 rgba(83, 14, 14, 0.8)
  • 绿笔：0 0 20px 0 #3B7E20CC
  • 蓝笔：0 0 20px 0 hsla(223, 59%, 31%, 0.8)

即设置每支笔的位置都为0，模糊度都为20px，扩散度都为0。可以看到最终效果

【CSS】通过一组彩色笔掌握CSS颜色

小结

  1. CSS设置颜色的三种方式：rgb(255,0,0) #00ff00 hsl(240,100%,50%);
  2. 渐变：linear-gradient()；
  3. 不透明度：opacity或者background: rgba()等
  4. 边框：border
  5. 阴影：box-shadow

原项目链接：chinese.freecodecamp.org/learn/2022/…

我的github链接：github.com/newfish-cmy…