Коли ви кладете щось — скажімо, звичайний аркуш паперу — у папку з манілою, частина цієї речі може трохи визирати з папки. Те ж саме з гаманцем і кредитними картками. Картки виступають лише злегка, щоб ви могли швидко побачити, які картки ви носите.
Я називаю це «щілиною». Щілина – це місце, де ми створюємо ілюзію отвору, через який ми можемо дражнити візуальний елемент, що визирає з нього. І ми можемо це зробити в CSS!
Вирішальною частиною дизайну є тінь, яка дає візуальний сигнал про наявність щілини. Потім є кришка для щілини, яка забезпечує простір для експонованого елемента, щоб зазирнути знизу.
Ось що ми зробимо разом:
Почнемо зі створення тіні
Ви можете бути здивовані тим, що тінь у прикладі не створена за допомогою фактичної тіні CSS, наприклад box-shadow або drop-shadow() фільтр. Натомість тінь є окремим елементом, темним і розмитим. Це важливо для того, щоб зробити дизайн більш адаптивним, як у стані за замовчуванням, так і в анімаційному стані.
Обкладинка – ще один елемент дизайну. Обкладинка — це те, що я називаю елементом, який перекриває тінь. Ось малюнок, який показує, як тінь і покриття об’єднуються.
Тінь складається з маленького вертикального прямокутника з градієнтним фоном. Градієнт темніший посередині. Отже, коли елемент розмитий, він створює тінь, яка темніша в середині; отже, більш об’ємний.
Тепер ліва половина відтвореної тіні покрита зверху прямокутником, забарвленим точно так само, як і фон контейнера.
І обкладинка, і тінь потім злегка переміщуються вліво, тому здається, що вони шаруваті
Робота над обкладинкою
Щоб обкладинка зливалася з фоном дизайну, колір її фону успадковується від елемента, що містить її. Крім того, ви також можете спробувати змішати обкладинку з фоном, використовуючи такі стандарти, як CSS маски та режими змішування, залежно від вашого вибору дизайну та вимог.
Щоб дізнатися про деякі основи застосування цих стандартів, ви можете звернутися до цих статей: Sarah Drasner's «Маскування проти відсікання: коли використовувати кожен» забезпечує чудовий праймер на масках. Я також писав про режими змішування CSS в цій статті де можна оновити тему.
У вихідному коді мого прикладу ви помітите, що я вирівняв і склав елементи всередині
CSS Grid також дозволяє мені встановити всі три з них divs тому всі вони мають повну ширину в
main > div {
grid-area: 1 / 1;
}Це дозволяє складати все одне на одне. Зазвичай ми наполегливо працюємо, щоб уникнути покриття елементів іншими елементами в сітці. Але цей приклад спирається на це. Я дав .slit-cover із шириною 50%, що природно розкриває зображення під ним. Звідти я встановив a transform на ньому, що переміщує його на 50% у негативному напрямку, плюс невелика кількість, яку я змістив тінь раніше (25px), щоб переконатися, що це також розкрито.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}І ось воно! Досить природний проріз, який імітує щось, що визирає з папки, гаманця чи чого завгодно.
Є більше способів зробити це! По-перше, Flexbox може змусити елементи вишикуватися в рядок і вирівняти по центру таким чином. Є багато способів поставити речі поруч. І, можливо, у вас є спосіб використати box-shadow майно, drop-shadow() фільтр або навіть Фільтри SVG щоб отримати такий самий ефект тіні, який справді продає ілюзію.
І ви можете повністю риффувати на цьому, щоб отримати власний вигляд і відчуття. Наприклад, спробуйте поміняти місцями положення тіні та зображення. Або пограйте з комбінаціями кольорів і змініть їх blur() фільтрувати значення. Форму обкладинки та тіні також можна налаштувати — впевнений, ви можете створити вигнуту тінь замість прямої та поділитися нею з нами в коментарях!
