多年來,我的影子看起來都是假的,但我無法弄清楚為什麼。我會寫 box-shadow: 0 5px 10px black,得到一個泥灰色的光環,淡化它,然後繼續感到隱約不滿意。這張卡看起來像是有瘀傷,而不是陰影。直到我開始拆開我欣賞的設計系統(卡片似乎真正漂浮的系統)時,我才意識到這個技巧。他們從不使用一個影子。它們堆疊兩三個,每個執行不同的工作,結果讀作光的行為方式與光的實際行為方式相同。
我以 React 和 Tailwind 中建立介面為生,在 WP Adminify 中維護 WordPress 管理主題,其中陰影承載著許多視覺層次結構,並且我建立了 CSS盒影子產生器 在 toolz。dev 上,因為我厭倦了在文字編輯器中手動調整多層陰影並重新加載以查看結果。本指南是我所了解的所有內容 box-shadow 屬性:每個值的作用是什麼,為什麼分層有效,如何避免常見的陷阱,以及如何使用生成器在幾分鐘內從空白元素生成 CSS。
TL;DR: 一個CSS
box-shadow採用 X 偏移量、Y 偏移量、模糊半徑、擴展半徑和顏色,並可選配inset關鍵字。模糊軟化邊緣;擴散在模糊之前會增加或縮小陰影。真正的高程來自堆疊多個逗號分隔的陰影,而不是來自啟動一個陰影'不透明度。使用低不透明度黑色、小 Y 偏移、大模糊和輕微負擴展 - 然後直接從生成器複製 CSS。
框陰影屬性實際上有什麼作用?
box-shadow 在元素周圍繪製一個或多個陰影's 邊框框,並在 中指定屬性 CSS 背景和邊界 3 級。 單一陰影的語法如下所示:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
需要偏移量;模糊、展開和顏色是可選的,但您幾乎總是會設定它們。以下是每個人控制的內容,就像我在調整時考慮它們的方式一樣:
偏移 X 水平移動陰影。正值將其向右推,負向左推。對於大多數介面陰影,您希望它處於或接近零,因為現實世界中的光通常來自上方,將陰影直接向下投射而不是向側面投射。
偏移 Y 垂直移動陰影。正值將其向下推,這就是您想要的位於頁面上方的元素。這是最能控制如何引用的單一值;高&引用;元素的感覺。
模糊半徑 軟化陰影's 邊。值為零會給出像實心形狀一樣的硬邊陰影;較大的值會分散柔軟度。這不能是負數。幾乎每個自然外觀的陰影都使用比其 Y 偏移量大幾倍的模糊。
展開半徑 在施加模糊之前改變陰影的大小。正擴散使陰影在各個方向上變大;負擴散會縮小它。負擴散是緊密、可信的卡片陰影的秘密武器,因為它將陰影拉入,這樣就不會滲出到元素之外。
顏色 是任何有效的 CSS 顏色。最好的介面陰影使用黑色或低不透明度的近黑色 - 例如 rgba(0, 0, 0, 0.1) - 而不是完全不透明的灰色,因為半透明的黑色會像真正的陰影一樣為它背後的任何東西著色。
為什麼好的陰影會使用不只一層?
這個想法完全改變了我的陰影,所以它有了自己的部分。單一陰影是一個單一的、均勻的斑點。真正的陰影並不均勻。靠近物體時,陰影更暗、更銳利;越遠,它越亮、越分散。你可以透過堆疊陰影來近似這種衰減。
經典的配方是兩層:緊密的、稍深的陰影靠近元素,為其提供清晰的基礎,再加上其下方更柔軟、更寬、更淺的陰影,提供環境擴散。例如:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
瀏覽器按順序繪製逗號分隔的陰影,第一個陰影位於頂部。每一層都很便宜,兩三個一起讀作真正的深度,無論你如何調諧,任何一個陰影都無法做到這一點。這正是生成器圍繞層而不是單組滑桿構建的原因 - CSS盒影子產生器 帶有卡片、高架和浮動等預設的船舶都是多層的,因此您可以從逼真的底座而不是孤獨的斑點開始。
我使用的心理模型:考慮海拔高度。休息卡位置較低,有一個小而緊的陰影。下拉式或彈出式卡的位置較高,而下拉式卡或彈出式卡的位置較大、較軟。模態位置最高。增加高度意味著增加所有層的 Y 偏移和模糊,而不僅僅是使一個陰影變暗。
如何創造內在的影子?
的 inset 關鍵字翻轉元素內的陰影's 填充盒而不是向外投射。添加 inset 到陰影聲明的前面,它在元素內繪製:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
內陰影是您使控制看起來被壓緊、凹進或雕刻的方式。文字輸入通常會透過微妙的插入陰影讀起來更好,這表明文字位於內部。按下按鈕狀態可以將其外部陰影替換為內部陰影,從而感覺身體受到抑制。整個新形態趨勢是建立在一個方向的光插入與另一個方向的暗插入配對的基礎上。在生成器中,每層插入一個單切換,因此您可以在同一元素中混合插入和開始的陰影 - 這正是新形態表面所需要的。
如何使用 Box Shadow Generator?
該流程旨在匹配我的實際工作方式。打開 CSS盒影子產生器 然後,您將看到一個預覽元素,其中已經應用了逼真的卡片預設,因此您永遠不會盯著空白的畫布。
選擇一個預設來接近您想要的內容 - 微妙、卡片、高架、浮動、內部、發光、新形或鋒利。每個都載入其完整的圖層堆疊。然後選擇一個圖層並用滑桿對其進行調整:偏移 X、偏移 Y、模糊和展開,每個滑桿都有自己的控制,加上顏色選擇器、不透明度滑桿和插入開關。當您拖曳時,預覽會即時更新,因此您可以直接塑造陰影,而不是編輯數字並想像結果。
如果您需要更多深度,請新增一層。如果一層沒有做任何有用的事情,請將其刪除。有一個背景切換,可以在明暗之間切換預覽,這很重要,因為在明暗卡上看起來完美的陰影可能會消失,或者在暗卡上變成醜陋的灰色環。在出貨前檢查兩者可以節省往返時間。
當你高興的時候,複製CSS。你可以抓住平原 box-shadow 聲明,或還包括的區塊 -webkit-box-shadow 如果您必須支援非常舊的 WebKit 版本,請使用前綴。將其貼到您的樣式表、樣式元件或 Tailwind 任意值中,然後就完成了。
與網站上的每個工具一樣,它完全在您的瀏覽器中運行。沒有上傳任何內容,一旦加載,它就會保持離線工作,這與我在 中描述的客戶端方法相同 資料隱私指南.
現實世界的用例
為設計系統建立標高
當我設定一個新專案時,我定義了一組固定的高程,而不是讓每個組件發明自己的陰影。通常距離 " 四到五個步驟;休息卡&報價;最多&報價;模態。&報價;我在生成器中建立每個卡,複製 CSS,並將它們作為命名值放入我的設計令牌中。然後,每個卡片、選單和對話方塊都會引用一個級別,因此整個產品共享一個一致的照明模型。在文字編輯器中手動執行此操作很痛苦;透過即時預覽來完成此操作需要幾分鐘的時間。
讓一張牌真正浮動
預設本能是一個單一的暗影,看起來是貼在上的。修復的是兩層配方:一層緊密的層,帶有小的 Y 偏移和負擴展來固定卡片,下面有一層更寬、更軟的環境光。從卡片或高架預設開始,推動值進行品嚐,您會得到一張讀作抬起而不是勾勒的卡片。
設計緊迫且集中的狀態
互動式回饋通常存在於陰影中。按鈕可以失去大部分外部陰影,並在按下時獲得一個小插圖,以感覺受到物理推動。輸入可以攜帶永久的微妙插圖,看起來像一口井。透過切換插圖和觀看預覽,這些可以快速製作原型,並且它們可以為很少的程式碼添加大量感知到的潤色。
新形態表面
如果您要選擇柔和的 UI 外觀,則需要在同一元素上指向相反方向的兩個陰影 - 深色陰影向右下方,淺色陰影向左上方 - 因此表面看起來是從背景中擠出的。 Neumorphic 預設會設定此設置,然後調整顏色、不透明度和模糊度以匹配您的特定背景。它僅適用於既不是純白色也不是純黑色的背景,深色背景切換可協助您檢查。
框陰影與濾鏡:陰影
我常遇到的一個問題是:我什麼時候該使用 filter: drop-shadow() 代替 box-shadow?它們看起來相似,但行為不同,選擇錯誤會導致真正的錯誤。
| 特色 | 盒子陰影 | 過濾器:陰影() |
|---|---|---|
| 跟隨 | 矩形邊框框 | 實際可見(不透明)像素 |
| 最好 | 卡片、按鈕、面板、輸入 | 標誌、圖示、透明、不規則形狀的 PNG |
| 支援插圖 | 是的 | 不 |
| 支持傳播 | 是的 | 不 |
| 多個陰影 | 是的,逗號分隔 | 是的,透過連結過濾器 |
| 影響佈局 | 不 | 不 |
簡短版本:對於普通的矩形元素,請使用 box-shadow - 它更有能力,支援擴展和插入,這就是該生成器產生的。伸手去拿 drop-shadow() 只有當您需要陰影來追蹤透明或不規則的形狀(例如徽標或切口圖示)時,矩形陰影才會看起來錯誤。
先進的提示和陷阱
有幾件事我被燒傷了。首先,陰影被剪掉 overflow: hidden 在祖先身上。如果你美麗的影子被神秘地剪掉,祖先就會剪掉它--要么給影子空間,要么移動影子 overflow 在別處統治。因為 box-shadow 從不影響佈局,它不會推動相鄰元素,這是一個功能,但它也意味著陰影可以在兄弟姊妹下方默默地延伸。
其次,許多元素的巨大模糊可能會降低繪畫性能,尤其是在動畫時。如果您在滾動或懸停在長列表上對陰影進行動畫處理,請注意幀速率;有時,在包含靜態陰影的偽元素上對不透明度進行動畫處理會更便宜。一旦您的 CSS 完成,就將其運行 CSS 縮小器 剃除冗長的多層陰影添加的額外位元組。
第三,不要忘記陰影顏色可能不僅僅是黑色。非常微妙的色調 - 表面的深色版本'色調而不是純黑色 - 通常看起來比中性灰色更豐富,因為真正的陰影會拾取環境顏色。這是一個小舉動,但回報卻不成比例。
如果您正在組裝更廣泛的 CSS 工具包,則 web 開發人員工具包指南 涵蓋陰影工作與其他基於瀏覽器的實用程式之間的適合位置,一旦您的陰影完成, 梯度產生器 和 選色器 完善表面造型。如果您想方便使用,請將其與配對 色彩對比度檢查器 因此,陰影卡上的內容保持可讀性。
問號
CSS Box-Shadow 屬性是什麼？
框陰影在元素周圍添加一個或多個陰影's 框架。每個陰影採用水平偏移、垂直偏移、可選的模糊半徑、可選的擴展半徑和顏色,並帶有可選的插入關鍵字來繪製框內的陰影。多個陰影以逗號分隔,並繪製第一個陰影。
模糊和傳播有什麼區別？
模糊半徑會軟化陰影邊緣,因此較大的值會使其更加擴散。展開半徑會改變陰影'模糊之前的大小:正擴散使其向各個方向增長,而負擴散則使其收縮,這就是將陰影緊緊地塞在卡片下方而不是流過其邊緣的方式。
如何在 CSS 中建立內部陰影？
將插入關鍵字新增至陰影。 inset 在元素內部繪製陰影's 填充框而不是外部,這對於按下的按鈕、輸入井和新型表面非常有用。切換產生器中的插入開關會自動將其新增至所選圖層。
我可以在一個元素上使用多個框陰影嗎？
是的。您可以在一個以逗號分隔的框陰影聲明中列出多個陰影,瀏覽器按順序繪製它們,第一個位於頂部。在較小、較暗的陰影下方分層柔和、寬闊的陰影是使仰角看起來逼真而不是粘貼的標準方法。
為什麼我的盒子影子會被剪掉？
當祖先溢出時,陰影會被切斷:隱藏或元素位於剪輯容器的邊緣。給影子房間,或將溢出:隱藏規則移至其他元素。因為箱形陰影不會影響佈局,因此它永遠不會推動相鄰元素,因此它也可以在兄弟姊妹下方靜靜地延伸。
Box-Shadow 和 Filter: Drop-Shadow 有什麼不同？
框陰影遵循元素'是矩形邊框框,因此它忽略了 PNG 內部的透明區域或不規則形狀。過濾器:陰影()追蹤實際可見像素,這適合透明的標誌和圖示。對於標準矩形卡片和按鈕,框陰影是正確的選擇,並且支援陰影所不支援的展開和插入。
我還需要 box-shadow 的 -webkit- 前綴嗎？
對於現代瀏覽器來說,沒有。盒式陰影多年來一直沒有前綴並受到廣泛支援。只有當您必須支援非常舊的 WebKit 建置時,生成器可以輸出的前綴區塊才有用,對於大多數項目,僅標準盒式陰影屬性就足夠了。
這個盒子陰影生成器會將我的資料發送到任何地方嗎？
不 。 預覽和 CSS 輸出完全在您的瀏覽器中使用 JavaScript 產生。 沒有上傳或儲存值，並且一旦頁面載入，該工具繼續在沒有網路連線的情況下工作。
