CSS – Box Shadow & Text Shadow

前言

之前在 CSS – W3Schools 學習筆記 (3) 介紹過這個功能, 但一直不熟練. 每次用都卡卡的, 估計是沒有些一篇獨立的筆記的緣故. 特此寫一篇.

 

Text Shadow

下面這個是 before, after 的效果

CSS Style

h1 {
  text-shadow: 5px 5px 5px red;
}

4 個值分別代表 x y blur color, 一個一個理解

Offset

text-shadow: 50px 50px 0 red;

效果

它的邏輯就是通過 x, y 座標生成一個 "影子" 出來. 之所以沒有濛濛是因爲 blur = 0

Blur

text-shadow: 50px 50px 5px red;

效果

blur 5px 的邏輯是字體被放大 5px 然後帶有顏色帶有 gradients 漸變. 所以就濛濛了.

Color

color 默認是依據字本身的 color 也就是 currentColor 的意思啦.

multiple shadow

text-shadow: 50px 50px 5px red, -50px -50px 5px yellow

可以創建多個 shadow, 只要加上逗號就可以了.

 

Box Shadow

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  color: pink;
  box-shadow: 100px 100px 0 1px;
}

效果

box-shadow 有 5 個值, x y blur spread color

offset 的原理和 text shadow 是一樣的. 需要注意的是它整個 "影子" 都是有顏色的哦,

color 默認也是 currentColor

blur 的原理也是往外擴展 px 然後 gradients 漸變

multiple shadow 也是一樣的, 加逗號.

spread

spread 和 blur 類似, 都是往外擴展 px, 但它沒有 gradients 漸變 而是實打實的顏色

 

左圖是真實效果, 有圖是用來解釋的, 粉紅裏的框是我自己加的, 框往外 10px 就是然後沒有漸變

如果是 blur 的話效果是這樣的

因爲是漸變所以看上去就小了很多.

一邊 shadow

參考: stackoverflow – How can I add a box-shadow on one side of an element?

box-shadow: 10px 0 10px -10px red;

原理就是 -10px spread, 它讓 4 邊都喫進去. 然後 10px blur 又長出來. 最後 10px 右就只有邊被推出來, 所以看見了 shadow.

過程類似上圖這樣. 注意最後一張圖, bottom 的 blur 的 width 其實是比較短的, 因爲 spread 的原因. 這個效果不一定是想要的

所以還有另一個方法是用 clip-path

一樣是用 box-shadow 來做影子, 只是用了 clip 把不想要的 3 邊影子 clip 掉. 這裏的關鍵是 inset

inset 的用法是這樣的

clip-path: inset(20px 20px 50px 20px);

效果

有點像 padding. top right bottom left 往內 clip.

回到 box-shadow 的例子. inset(0, -15px 0 0)

如果是 4 個 0, 那麼所有 shadow 都看不見. 

right 15px 是往內 clip, 反過來 right -15px 是往外. 所以反而 right shadow 就出現了. 很巧妙的技巧.

但也可以看出不是正規做法. 但是比起 spread 這招還是比較好使的.

 

總結

shadow 的 step 是

1. 通過 offset 畫一個影子 (如果 offset 0 0 就是在原地畫影子)

2. 通過 spread 擴大 / 縮小 影子的體積

3. 通過 blur 擴大影子的體積.