EP01 | 跟著影片做前端切版練習 - CSS Glowing Text Typography Effects

發表於 更新於 分類於 ， ， ，

練習影片

練習重點

架構

HTML

1
2
3
<body>
  <h1 data-text="Celeste">Celeste</h1>
</body>

CSS

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');
body {
  font-family: "Balsamiq Sans", cursive;
  height:100vh;
  /*讓內元素置中*/
  display: flex;
  justify-content: center;
  align-items:center;
  background-color: #111;
}
h1 {
  font-size: 5em;
  /*文字全部大寫*/
  text-transform: uppercase;
  /*背景顏色*/
  background: linear-gradient(
    to bottom,
    #222 0%,
    #222 50%,
    #14120c 50%,
    #14120c 100%
  );
  /*文字顏色要是透明，才能在文字內顯示背景顏色*/
  color: transparent;
  /*背景顏色只有在文字裡面才能顯示，其他地方的背景顏色無法顯示*/
  background-clip: text;
  -webkit-background-clip: text;
  /*偽元素::before跟::after要以父元素h1為基準做定位*/
  position: relative;
}

h1::before {
  /*content是必有屬性*/
  /*可以使用字串插入內容*/
  /*  content: 'Celeste';*/
  /*可以取得HTML屬性值當作內容*/
  content: attr(data-text);
  text-transform: uppercase;
  /*偽元素::before跟::after要以父元素h1為基準做定位*/
  position: absolute;
  /*::before的排序要比父元素低一層(原本是高一層)*/
  /*原本h1::before>h1 =>現在 h1>h1::before*/
  z-index: -1;
  top: 4px;
  left: 4px;
  background: linear-gradient(
    55deg,
    #3f00ff,
    #e37526,
    #fff600,
    #1c39bb,
    #001cff,
    #9f00ff
  );
  background-clip: text;
  -webkit-background-clip: text;
}
h1::after {
  /*content是必有屬性*/
  /*可以使用字串插入內容*/
  /*  content: 'Celeste';*/
  /*可以取得HTML屬性值當作內容*/
  content: attr(data-text);
  text-transform: uppercase;
  /*偽元素::before跟::after要以父元素h1為基準做定位*/
  position: absolute;
  /*::after的排序要比::before低一層(原本是高2層)*/
  /*原本 h1::after>h1>h1::before => 現在 h1>h1::before>h1::after*/
  z-index: -2;
  top: 30px;
  left: 20px;
  background: linear-gradient(
    55deg,
    #3f00ff,
    #e37526,
    #fff600,
    #1c39bb,
    #001cff,
    #9f00ff
  );
  background-clip: text;
  -webkit-background-clip: text;
  filter: blur(20px);
}

小提醒

  • 在使用 linear-gradient() 時，不是使用 background-color ，而是 background 。

  • 在使用 linear-gradient() 時，如果有指定角度的話，角度之間無須空格，如 linear-gradient(55deg,...) ， 55 跟 deg 之間不用加空格。

  • 在使用偽元素 ::before 跟 ::after 時，一定要注意順序，可以直接將偽元素當成該元素的子元素來看待，子元素的層級都是會比父元素高，而同一層級下的元素，後面元素的層級又會比前面元素的層級高，以上方為例，如果不變動層級的話(不加 z-index )，那麼原本的層級應該會是 h1::after > h1::before > h1 。

Demo:

See the Pen 前端練習01 - CSS Glowing Text Typography by Celeste6666 (@celeste6666) on CodePen.