前端开发技巧-CSS Color

阳明先生 2018/5/9 frontend css

使用 color 改变边框颜色

要点：border 没有定义 border-color 时，设置 color 后，border-color 会被定义成 color

场景：边框颜色与文字颜色相同

兼容：color

.elem {
  border: 1px solid;
  color: #f66;
}

1
2
3
4

使用 filter 开启悼念模式

要点：通过 filter: grayscale() 设置灰度来开启悼念模式

场景：网站悼念

兼容：filter

代码：在线演示

html {
  filter: grayscale(100%);
}
.mourning-mode {
  img {
    width: 400px;
  }
}

1
2
3
4
5
6
7
8

使用 filter 模拟 Instagram 滤镜

要点：通过 filter 的滤镜组合起来模拟 Instagram 滤镜

场景：图片滤镜

兼容：filter、css-gram

代码：在线演示

.instagram-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  width: 1635px;
  height: 630px;
  li {
    overflow: hidden;
    position: relative;
    width: 225px;
    height: 150px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  p {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 10px;
    width: fit-content;
    height: 30px;
    background-color: #000;
    filter: none;
    line-height: 30px;
    color: #fff;
  }
}
.obscure {
  filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(0.6);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

使用::selection 改变文本选择颜色

要点：通过 ::selection 根据主题颜色自定义文本选择颜色

场景：主题化

兼容：::selection

代码：在线演示

::selection {
  background-color: $purple;
  color: #fff;
}
.select-color {
  line-height: 50px;
  font-weight: bold;
  font-size: 30px;
  color: $red;
}
.special::selection {
  background-color: $green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

使用 linear-gradient 控制背景渐变

要点：通过 linear-gradient 设置背景渐变色并放大背景尺寸，添加背景移动效果

场景：主题化、彩虹背景墙

兼容：gradient、animation

代码：在线演示

.gradient-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%; // 左上到右下
  font-weight: bold;
  font-size: 100px;
  color: #fff;
  animation: move 10s infinite;
}
@keyframes move {
  0%,
  100% {
    background-position-x: left;
  }
  50% {
    background-position-x: right;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用 linear-gradient 控制文本渐变

要点：通过 linear-gradient 设置背景渐变色，配合 background-clip: text 对背景进行文本裁剪，添加滤镜动画

场景：主题化、特色标题

兼容：filter、gradient、animation、background-clip、text-fill-color

代码：在线演示

.gradient-text {
  background-image: linear-gradient(90deg, $red, $orange); // 左到右
  background-clip: text;
  line-height: 60px;
  font-size: 60px;
  animation: hue 5s linear infinite;
  -webkit-text-fill-color: transparent;
}
// 色相旋转
@keyframes hue {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-1turn);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用 caret-color 改变光标颜色

要点：通过 caret-color 根据主题颜色自定义光标颜色

场景：主题化

兼容：caret-color

代码：在线演示

.form-validation {
  width: 500px;
  div {
    margin-top: 10px;
    &:first-child {
      margin-top: 0;
    }
  }
  label {
    display: block;
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 16px;
  }
  input,
  textarea {
    display: block;
    padding: 0 20px;
    outline: none;
    border: 1px solid #ccc;
    width: 100%;
    height: 40px;
    caret-color: $blue;
    transition: all 300ms;
    &:valid {
      border-color: $green;
      box-shadow: inset 5px 0 0 $green;
    }
    &:invalid {
      border-color: $red;
      box-shadow: inset 5px 0 0 $red;
    }
  }
  textarea {
    height: 122px;
    resize: none;
    line-height: 30px;
    font-size: 16px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

使用:scrollbar 改变滚动条样式

要点：通过 scrollbar 的 scrollbar-track 和 scrollbar-thumb 等属性来自定义滚动条样式

场景：主题化、页面滚动

兼容：:scrollbar

代码：在线演示

.scroll-indicator {
  position: relative;
  overflow: hidden;
  border: 1px solid $purple;
  width: 500px;
  height: 300px;
  &::after {
    position: absolute;
    left: 0;
    right: 5px;
    top: 2px;
    bottom: 0;
    background-color: #fff;
    content: '';
  }
}
.article {
  overflow: auto;
  height: 100%;
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-track {
    background-color: #f0f0f0;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: $purple;
  }
  article {
    padding: 0 20px;
    background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;
    background-size: 100% calc(100% - 298px + 5px);
    > * {
      position: relative;
      z-index: 9;
    }
  }
  h1 {
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
  }
  p {
    margin-top: 20px;
    line-height: 20px;
    text-indent: 2em;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

PS：本文整理自 https://juejin.im/post/5d4d0ec651882549594e7293 侵删。

知行合一