如何使用CSS製作文件夾'縫製”效果

模擬紙張從文件夾中微微露出的效果，或者信用卡從錢包中略微伸出的視覺效果，這在設計中被稱為“裂縫”效果。 通過CSS，我們可以巧妙地創建這種視覺錯覺，讓元素看起來像是從一個開口中探出。

設計的關鍵在於陰影，它提供了視覺線索，暗示著存在一個裂縫。然後是覆蓋裂縫的元素，為從下方窺視的元素提供空間。

我們將一起創建一個這樣的效果：

首先創建陰影

你可能會驚訝地發現，示例中的陰影並非使用實際的CSS陰影（如box-shadow或drop-shadow()過濾器）創建。相反，陰影本身就是一個獨立的元素，顏色較暗且模糊。這對於使設計在默認狀態和動畫狀態下更具適應性至關重要。

另一個元素是覆蓋層，它重疊在陰影之上。下圖顯示了陰影和覆蓋層是如何組合在一起的。

陰影由一個小而直立的矩形構成，具有漸變背景。漸變在中間較暗。因此，當元素模糊時，它會創建一個中間較暗的陰影；因此更具立體感。

現在，重現的陰影的左半部分被頂部的一個矩形覆蓋，該矩形的顏色與其容器的背景顏色完全相同。

然後，覆蓋層和陰影都向左移動了一點點，使其看起來像是分層疊加的。

處理覆蓋層

為了使覆蓋層與設計的背景融合，它的背景顏色繼承自其包含元素。或者，根據您的設計選擇和要求，您也可以嘗試使用CSS蒙版和混合模式等標準來使覆蓋層與其背景融合。

有關如何應用這些標準的一些基礎知識，您可以參考以下文章：Sarah Drasner的“Masking vs. Clipping: When to Use Each”提供了關於蒙版的優秀入門介紹。我還在這篇文章中寫過關於CSS混合模式的內容，您可以在其中復習相關主題。

在我的示例的源代碼中，你會注意到我使用CSS Grid（我經常在我的演示中使用的佈局標準）對<main></main>元素內的元素進行了對齊和堆疊。如果您正在重新創建類似的設計，請使用最適合您的應用程序的佈局方法來對齊設計的不同部分。在本例中，我在<main></main>元素上設置了一個單列網格，這允許我將覆蓋層、陰影和圖像居中對齊。

CSS Grid還允許我設置所有三個div，使它們在<main></main>容器中都為全寬：

main > div {
  grid-area: 1 / 1;
}

這使得所有內容都堆疊在一起。通常情況下，我們會努力避免在網格中用其他元素覆蓋元素。但此示例依賴於此。我已經將.slit-cover的寬度設置為50%，這自然會顯示下面的圖像。從那裡，我設置了一個變換，使其在負方向上移動50%，加上我之前移動陰影的小量（25px），以確保它也被顯示出來。

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

就是這樣！一個看起來非常自然的裂縫，模擬了從文件夾、錢包或其他任何東西中窺視出來的東西。

還有更多方法可以做到這一點！例如，Flexbox可以使元素像這樣排成一行並居中對齊。有很多方法可以使元素並排顯示。也許您可以使用box-shadow屬性、drop-shadow()過濾器，甚至SVG過濾器來獲得相同的陰影效果，從而真正增強這種錯覺。

您可以隨意調整它以獲得自己的外觀和感覺。例如，嘗試交換陰影和圖像的位置。或者玩弄顏色組合併更改blur()過濾器的值。覆蓋層和陰影的形狀也可以進行調整——我相信您可以創建一個彎曲的陰影而不是直線陰影，並在評論中與我們分享！

以上是如何使用CSS製作文件夾'縫製”效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！