使用 CSS box-shadow 模擬彎曲陰影 (以 Apple 首頁為例)

最近 Apple 首頁也加入了彎曲陰影的效果,好奇之下就點開來看一下他怎麼做的。他不是使用之前已經有人做過的 pseudo element + box-shadow 來做,而是直接透過多層 wrapper 的元件來實作陰影效果。

Concept

陰影效果的概念是:

  1. 用一個以 border-radius 做出圓邊的元件、
  2. 幫他開 box-shadow 之後
  3. 放到想要套用彎曲陰影的元件後面(被遮住)。

除了最上面的圖以外,還有下面兩張可以看整個陰影技巧的示意圖。黃色這個就是藏在背後,負責顯示陰影的元件(無論你是用真的 element 還是 pseudo element)。


border-radius

border-radius 的作法也要留意一下,如果要做出上圖第三張(黃色邊框)這種形狀的話,需要給定他第二個半徑讓他把邊框的圓角做成橢圓形。Apple 這邊給的設定是:

border-radius: 100% / 33px;

其中 100% 是 x 軸的第一個半徑、33px 是 y 軸的第二個半徑。如果只給定一個半徑,整個邊框會慢慢往橢圓形或圓形邁進,做出來的陰影曲度可能會超過你所想要的效果。

把陰影放到目標元件的「背後」

這邊講的 前後關係 對應到網頁上來說就是相對的 z 軸高度。如果你有玩過 Firefox 網頁檢閱器裡面有個「3D 檢視」,會發現每個子元件像是一層一層貼紙往上堆似的,堆在 parent element 的上面。越上面的就是越 前面

Apple 這個多層元件的做法,是以最前面產品圖片的 parent element 來當作負責顯示陰影的元件。因為通常 parent element 會顯示在 child element 的後面被蓋住,就不需要再特別去調 z-index 的前後關係。

如果用 pseudo element 做的話,不管是 ::before::after 他都被視為是該物件的子元件,所以這時候會需要用 z-index: -1 之類的方法把它硬是送到元件的後面去,才不會反過來被整片陰影蓋住。

Demo




            
          
comments powered by Disqus