僅用 CSS實現多彩、智能的陰影

背景

有沒有想過如何建立從前景元素中繼承某些顏色的陰影效果？閱讀本文並找出如何實現方法吧！

前幾天我通過家得寶（Home Depot，美國家得寶公司，全球領先的家居建材用品零售商），他們正在大規模展銷正在出售的智能燈 💡，其中一種是一系列燈泡位於電視機後面，它們會投射出與電視機前景屏幕上顯示的顏色相近的燈光，相似於如下圖片所示。

注意電視後面發生了什麼。電視機屏幕前景中顯示的顏色被燈投影成彩色陰影背景。隨着屏幕上顏色的變化，背景投影顏色也發生變化。真的很酷，對吧？

看到這一點後，天然而然地我首先想到的是，可否使用 web 開發技術建立一個五光十色的，而且足夠聰明能夠模擬前景顏色的陰影呢？事實證實，在只使用 CSS 的狀況下，徹底能夠實現這種效果。在本文中，咱們將研究如何實現。

開幹！

令其成真

在接下來的段落中你將會發現，剛開始時，乍一看僅使用 CSS 來建立智能的彩色陰影彷佛是一項艱鉅的任務，當咱們按部就班，把困難部分拆分紅更小的部分時，你就會發現一切都會變得容易理解消化。在接下來的章節中，咱們將建立一個以下所示的示例：

你看到的是一張壽司 🍣 的圖片，後面有與前景顏色相對應的陰影。爲了強調咱們所作的是動態的，給陰影增長了一個脈動動畫效果。經過這個有效的示例，讓咱們深刻探討如何僅在使用 HTML 和 CSS 的狀況下讓一切變得生動起來。

展現圖片

用於展現壽司 🍣 的 HTML 以下所示並無什麼特別：

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

咱們有一個父級 div 元素 .parent，它包含一個子級元素 .suchi 用於展現 🍣。咱們經過使用一張背景圖片的形式來實例化 🍣，.sushi 元素的具體樣式規則以下：

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

在上面樣式規則中，咱們將 div 設置爲 150 * 150 寬高像素，而且設置了 background-image 及相關屬性，若是展現一下咱們如今所實現的結果，能夠看到以下圖所示的內容。

建立陰影

如今咱們已經展現出了咱們的壽司 🍣 圖片，剩下更加有趣的部分就是來定義陰影。咱們將使用指定一個子僞元素 ::after 來定義陰影，它將作 3 件事情：

• 直接位於圖片所在 div 的後面；
• 繼承與父元素相同的背景圖像；
• 經過濾鏡產生出多彩的 drop-shadow 陰影效果。

上述3個功能由如下2個樣式規則實現：

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

花一點時間來瀏覽下這裏的實現，密切關注每一個屬性和對應值。最值得注意的是 background 屬性和 filter 屬性。 background 的值是 inherit，這意味着它將繼承父級元素的背景值：

background: inherit;

filter 屬性定義了兩個濾鏡值：drop-shadow 和 blur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

咱們的 drop-shadow 濾鏡設置了一個 50% 透明度的黑色陰影。blur 濾鏡爲爲元素設置 20px 的模糊效果。這兩個濾鏡的結合最終就能夠創造出多彩的陰影，當這兩條樣式規則生效時，咱們就能夠看到以下圖出如今壽司 🍣 圖像後面彩色的陰影：

到這一點，咱們已經實現了不少。爲了完整性，若是你想要多彩的陰影具備放大縮小的動畫效果，如下額外的 CSS 能夠幫你實現：

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

若是你想在不使用循環動畫效果的狀況下加強交互性，也可使用 CSS transition 來改變陰影的行爲，如在 hover 操做狀況下。須要強調的難點是對待僞元素只須要像對待用 HTML 建立的或 JavaScript 動態建立的元素同樣，惟一的不一樣是這個元素徹底是僅使用 CSS 建立的！

結論

僞元素容許咱們使用 CSS 來建立一般在 HTML 和 JavaScript 領域內完成的元素建立任務。對於咱們多彩的智能陰影來講，咱們依賴於父元素有一個背景圖像集，這使得咱們定義一個既能夠繼承父級背景細節又能夠設置模糊效果和投影效果的子元素變得容易。雖然這一切都很好，減小了咱們大量的複製粘貼工做，可是這種方法也不是很靈活。

若是我想將這樣的陰影應用到一個不僅是帶有背景圖像的空元素上，該怎麼辦呢？若是我有一個 HTML 元素如一個按鈕或組合框，我想應用這種陰影效果呢？一種解決方案是依靠 JavaScript 複製 DOM 中的相應元素，將其放置在前臺元素底層，應用過濾器，這樣也是一種方法。雖然這能夠實現效果，但我想到這個有點重複 DOM 元素的沉重過程就毛骨悚然。更糟糕的是，JavaScript 沒有將你想提供的任意視覺意向轉換爲渲染目標位圖的能力！🥶