使用 CSS Radial Gradient 模擬彎曲陰影

彎曲陰影示意圖

其實我也不知道用中文到底怎麼稱呼這個東西,找了一下英文叫做 Curved Shadow。

這類的陰影其實也蠻常見了,上圖示範的是有點像紙張中間隆起造成的陰影、另外一種常見的是紙張中間凹陷、兩邊捲起造成的陰影。最直覺上就是在 Photoshop 裡面先做好再轉成圖片出來,不過我一直都很懶得做圖片──另一方面,圖片也蠻不彈性的。

如果你要套陰影的主體寬度改變了,圖片感覺很難對應的很好。所以我觀察了一下,決定使用放射狀漸層來模擬這個效果。

放射狀漸層模擬彎曲陰影概念圖

實作起來的概念大概就像上圖那樣,畫個由裡到外淡出的橢圓形漸層、把上半部蓋掉、然後再加一條邊線來當做陰影與物件主體的邊緣線。橢圓不要太高,看起來就有一點彎曲陰影的感覺了。而且需要的 code 也很簡單,只需要一行:

background-image: (-vendor-)radial-gradient(top center, 50% 5px, rgba(0,0,0,.2), transparent);

其中 50% 是 x 軸半徑、 5px 是 y 軸半徑,top center 為漸層中心點位置。不過有關 CSS Gradient 的語法,後面被 CSS Working Group 又翻修過了一次,所以如果要確保未來瀏覽器慢慢更新成最新標準後也能正常顯示,可以多加一行最新標準:

background-image: radial-gradient(50% 5px at top center, rgba(0,0,0,.2), transparent);

成果就像本文最上面那張圖了。

同樣的效果,之前也有不少人做過,例如 Nicolas Gallagher 這篇是用 pseudo element + box-shadow 來實作:中央凸起的 curved shadow 就搭配 border-radius、兩邊捲起的 page curl effect 則用兩組 box-shadow 搭配 transform: rotate() 來實現。效果也都不錯。

comments powered by Disqus