CSS 中帶有 Drop-Shadow 的真實感陰影

介紹

最近，我們面臨著為與 Little Thai 合作的新專案創建逼真陰影的挑戰。經過廣泛的研究，我們發現可用的資訊並不多。我們開始使用 CSS 中的 drop-shadow 指令來開發自己的技術，結果非常驚人。今天我們想與社區分享我們是如何實現這一目標的，以便每個人都能從這一進步中受益。

這部分開發的要求很明確；我們需要為 Little Thai 商店的產品提供逼真的陰影。為什麼？我們的想法是創建一個數位展示櫃，以便用戶可以購買該公司提供的產品。該提案的想法是以俯視視角展示產品，就好像它們被放置在桌子上一樣。為了使其更加真實，我們需要這些成分來產生逼真的陰影。此時，有兩個選擇。一方面，可以用 Photoshop 來完成。該影片解釋瞭如何做到這一點。另一方面，它可以透過 CSS 使用新的 drop-shadow 指令來完成。

這是一個挑戰，因為正如我們所提到的，沒有關於如何在 Photoshop 中製作逼真陰影的資訊。然而，這使我們不必在 Photoshop 中編輯商店中的數十種產品，而且不必每次添加新產品時都進行編輯。那是怎麼做到的？

科技

CSS 中的 drop-shadow 指令是為圖形元素添加陰影的強大工具。然而，在尋求逼真效果時，它的使用並不總是那麼簡單。我們的解決方案是基於應用具有不同參數的多個陰影來實現更深、更真實的效果。

使用的 CSS 程式碼

這是我們用來創造逼真陰影的 CSS 程式碼：

過濾器： drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

程式碼說明

第一個陰影：17px 17px 13px rgba(0, 0, 0, 0.3)：這個陰影是最大且最分散的。這些參數表示陰影在 X 軸和 Y 軸上位移 17 像素，模糊度為 13 像素，不透明度為 30%。

第二個陰影：7px 7px 4.5px rgba(0, 0, 0, 0.3)：這個陰影比第一個陰影更小，漫反射更少。參數表示陰影在 X 軸和 Y 軸上位移 7px，模糊度為 4.5px，不透明度為 30%。

這兩個陰影的組合創造了一種單一陰影難以實現的深度感和真實感。

視覺範例以下是使用我們的逼真陰影技術的最終結果的視覺範例：

強調兩點很重要：

— 陰影在柔和的灰色調上效果最好，而不是純白色。

——在這種情況下，陰影是為頂視圖設計的。在其他拍攝角度下效果不太好。

實際應用

該技術可用於多種環境，從線上商店中的產品圖像到公司網站上的圖形元素。創建逼真陰影的能力可以顯著改善項目的視覺外觀和感知品質。

CSS 中的線上真實感陰影產生器

您可以在 MandarinaWebs 網站找到線上產生器

結論

我們非常高興與開發人員和設計師社群分享這項技術。我們相信，對於任何希望增強網路專案美感的專業人士來說，它都是一個有價值的工具。我們很樂意聽到您的回饋，並了解您如何在自己的工作中應用此技術。

以上是CSS 中帶有 Drop-Shadow 的真實感陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！