Когда вы кладете что-то — скажем, обычный лист бумаги — в папку-манилью, часть этой вещи может немного выглядывать из папки. То же самое с кошельком и кредитными картами. Карты немного высовываются, чтобы вы могли быстро увидеть, какие карты у вас есть.
Я называю такие вещи «щелью». Прорезь — это место, где мы создаем иллюзию отверстия, через которое мы можем дразнить визуальный элемент, выглядывающий из него. И мы можем сделать это в CSS!
Важнейшей частью дизайна является тень, которая дает визуальный сигнал о наличии щели. Затем есть крышка для щели, которая обеспечивает пространство для экспонируемого элемента, чтобы выглядывать из-под.
Вот что мы будем делать вместе:
Начнем с создания тени
Вы можете быть удивлены тем, что тень в примере не создается с помощью реальной тени CSS, например box-shadow или drop-shadow() фильтр. Вместо этого тень представляет собой отдельный элемент, темный и размытый. Это важно для того, чтобы сделать дизайн более адаптируемым как в состоянии по умолчанию, так и в анимированном состоянии.
Крышка — еще один элемент дизайна. Покрытие — это то, что я называю элементом, который перекрывает тень. Вот рисунок, изображающий, как тень и покрытие объединяются.
Тень сделана из небольшого вертикального прямоугольника с градиентным фоном. Градиент темнее в середине. Поэтому, когда элемент размыт, он создает более темную тень посередине; следовательно, более объемный.
Теперь левая половина воссозданной тени закрыта сверху прямоугольником, окрашенным точно так же, как фон контейнера.
Затем и обложка, и тень немного сдвинуты влево, так что они выглядят многослойными.
Работа над обложкой
Чтобы обложка сливалась с фоном дизайна, ее цвет фона наследуется от содержащего ее элемента. Кроме того, вы также можете попробовать смешать обложку с фоном, используя такие стандарты, как CSS-маски и режимы наложения, в зависимости от вашего выбора дизайна и требований.
Чтобы узнать об основах применения этих стандартов, вы можете обратиться к следующим статьям: Саре Драснер. «Маскировка против обрезки: когда использовать каждую из них» обеспечивает отличную основу для масок. Я также писал о режимах наложения CSS. в этой статье где можно освежить тему.
В исходном коде моего примера вы заметите, что я выровнял и расположил элементы внутри
То, что CSS Grid также позволяет мне сделать, это установить все три из этих divs так что они все на всю ширину в
main > div {
grid-area: 1 / 1;
}Это заставляет все складывать друг на друга. Обычно мы прилагаем все усилия, чтобы избежать покрытия элементов другими элементами в сетке. Но этот пример опирается на него. я дал .slit-cover при ширине 50%, что естественно показывает изображение под ним. Оттуда я установил transform на том, что перемещает его на 50% в отрицательном направлении, плюс маленькое количество я сместил тень раньше(25px), чтобы убедиться, что это также раскрыто.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}И вот оно! Довольно естественный разрез, который имитирует выглядывание чего-то из папки, кошелька или чего-то еще.
Есть больше способов сделать это! Во-первых, Flexbox может заставить элементы выстраиваться в ряд и выравниваться по центру вот так. Есть много способов получить вещи бок о бок. И, может быть, у вас есть способ использовать box-shadow имущество, drop-shadow() фильтровать или даже SVG фильтры чтобы получить такой же эффект тени, который действительно продает иллюзию.
И вы можете полностью изменить это, чтобы получить свой собственный внешний вид. Например, попробуйте поменять местами тень и изображение. Или поиграйте с цветовыми сочетаниями и измените blur() фильтр ценность. Форму покрытия и тени также можно настроить — держу пари, вы можете создать изогнутую тень вместо прямой и поделиться ею с нами в комментариях!
