EP03 | 跟著影片做前端切版練習 - Css Text Layers Typography

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

今天練習一個簡單的，更了解偽元素跟 text-shadow 的操作。

練習影片

練習重點

  • :hover效果 ： 可以製作出滑鼠移入時的效果。

  • transition ： 當元素在切換不同樣式時，針對不同的 CSS Property 製作出不同持續時間或過渡速率的過渡效果。

結構

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
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap");
body {
  height: 100vh;
  background: #fff600;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Caveat", cursive;
  font-size: 5.5em;
  text-transform: uppercase;
  letter-spacing: 10px;
  color: #e30022;
  text-shadow: 0 2px 0 #000, 0 4px 10px #000;
  position: relative;
  transition: all 0.5s;
}
h1::before {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  top: -3px;
  color: #1034a6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
}
h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  top: -6px;
  color: #f2f3f4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
}
h1:hover {
  text-shadow: -5px 5px 0 #000, -5px 5px 15px #000;
}
/*h1:hover跟h1::before結合的寫法*/
h1:hover::before {
  left: 5px;
  top: -6px;
}
/*h1:hover跟h1::after結合的寫法*/
h1:hover::after {
  left: 10px;
  top: -12px;
}

Demo:

See the Pen 前端練習03 - Css Text Layers Typography by Celeste6666 (@celeste6666) on CodePen.