CSS Box Shadow Генератор

Що таке CSS box-shadow?

CSS-властивість box-shadow додає тіньові ефекти навколо рамки елемента. Тіні є фундаментальним інструментом для створення глибини, підйому та візуальної ієрархії у вебдизайні. Ретельно підібрана тінь може зробити картку такою, що вона начебто ширяє над сторінкою, або надати кнопці вигляду натисненої.

Властивість box-shadow приймає кілька параметрів: горизонтальне зміщення, вертикальне зміщення, радіус розмиття, радіус розповсюдження та колір. Також можна додати ключове слово inset для створення внутрішніх тіней. Кілька тіней можна накладати на один елемент, розділяючи їх комами; вони відображаються від задньої до передньої.

Розбір синтаксису box-shadow

Повний синтаксис: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Значення offset-x і offset-y обов'язкові й визначають положення тіні відносно елемента. Додатні значення переміщують тінь вправо та вниз. Blur-radius пом'якшує краї — значення 0 створює різку тінь. Spread-radius розширює або стискає тінь — від'ємні значення створюють тіснішу тінь.

Як користуватися цим інструментом

Регулюйте повзунки горизонтального зміщення, вертикального зміщення, розмиття, розповсюдження та кольору. Попередній перегляд оновлюється в реальному часі, тому ви бачите, як виглядатиме тінь. Перемикайте опцію inset для внутрішніх тіней. Додавайте кілька шарів тіні для більш реалістичних ефектів глибини. Коли результат вас влаштує, скопіюйте згенерований CSS-код.

Поради щодо ефективних тіней

• Використовуйте тонкі тіні з низькою непрозорістю для чистого, сучасного, піднятого вигляду.
• Накладайте кілька тіней для більш реалістичної глибини — різка ближня тінь плюс м'яка розсіяна тінь імітує освітлення реального світу.
• Більший радіус розмиття з невеликим зміщенням створює ефект м'якого ширяння, ідеальний для карток і модальних вікон.
• Від'ємне розповсюдження створює тіснішу, більш сфокусовану тінь, корисну для тонких рамок.
• Узгоджуйте напрямок тіні на всій сторінці — непослідовні джерела світла виглядають неприродно.

Система підйому Material Design

Material Design від Google визначає рівні підйому від 0dp до 24dp, кожен зі специфічними значеннями тіней. Вищий підйом означає більший радіус розмиття та значення зміщення. Ця система забезпечує послідовну візуальну ієрархію в застосунку. Навіть якщо ви не дотримуєтеся Material Design, принцип використання послідовних рівнів підйому цінний для будь-якої дизайн-системи.

Вплив на продуктивність

Тіні box-shadow прискорюються GPU у сучасних браузерах і мають мінімальний вплив на продуктивність при типовому використанні. Однак дуже великі радіуси розмиття (50px+) на багатьох елементах одночасно можуть спричиняти падіння кадрів під час анімацій. Якщо потрібно анімувати тіні, розгляньте можливість використання transform: scale() для збільшення псевдоелемента зі статичною тінню замість прямої анімації значень тіней.

Часті запитання

У чому різниця між box-shadow і drop-shadow?

box-shadow застосовується до прямокутного блоку елемента, включаючи відступи та рамку. Функція filter: drop-shadow() слідує фактичній формі елемента, включаючи прозорі ділянки зображень. Використовуйте drop-shadow для непрямокутних елементів, таких як іконки або PNG-зображення з прозорістю.

Чи можна використовувати box-shadow для створення рамок?

Так. Box-shadow з нульовим розмиттям і додатним розповсюдженням діє як рамка, що не впливає на розкладку. Ця техніка корисна, коли потрібна візуальна рамка без зміни розмірів елемента, наприклад при стані hover.