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

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

練習影片

練習重點

架構

HTML

1
2
3
<body>
  <h1>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
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

body {
  height: 100vh;
  background: url(https://image.freepik.com/free-photo/happy-child-orange-sweater-plays-with-feather-floor_8353-182.jpg)
    no-repeat;
  /*讓圖片可以固定在可視區域(viewport)中，基準點係可視區域(viewport)左上角*/
  background-attachment: fixed;
  /*因原始圖片較小，利用cover，讓圖片可以放大到整個可是區域*/
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Oswald", sans-serif;
  font-size: 8em;
  text-transform: uppercase;
  background: url(https://image.freepik.com/free-photo/wooden-plank-textured-background-material_53876-33591.jpg)
    no-repeat;
  /*基準點仍是可視區域(viewport)左上角*/
  background-attachment: fixed;
  /*將圖片放大到整個可視區域(viewport)*/
  background-size: cover;
  /*背景圖片顯示區域僅文字部分*/
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}

h1::before {
  content: "Celeste";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  text-shadow: #000 -5px 5px 10px, #000 -10px 10px 15px, #000 -15px 15px 20px;
}

小提醒

在使用 background-attachment:fixed 會發現，不論是在哪裡使用 background-attachment:fixed ，所有使用該屬性的背景圖片的基準點都是可視區域(viewport)左上角(就是從基準點將背景圖片放上去)，所以在元素中圖片的顯示區域會是固定的，不因元素位置而有差別。

background-attachment:fixed 搭配 background-size: cover 使用的話，就能讓背景圖片充滿整個可視區域(viewport)。

Demo:

See the Pen 前端練習02 - Wooden Text Typography by Celeste6666 (@celeste6666) on CodePen.

Image by rawpixel.com - www.freepik.com