Генератор box-shadow

Як користуватися генератором box-shadow

1. Почніть із шаблону або залиште типову тінь М’яка. У ряду Шаблони є М’яка, Різка, Багатошарова, Підйом, Неоморфізм, Внутрішня та Сяйво.
2. У розділі Шари тіні клацніть шар, щоб вибрати його. Кожен шар можна пересунути кнопками Вгору і Вниз або прибрати кнопкою Видалити. Додати шар дублює вибраний шар, щоб ви могли підкоригувати копію.
3. Редагуйте вибраний шар у розділі Редагувати вибраний шар: перетягуйте точку в полі Зсув або користуйтеся повзунками та числовими полями Горизонтальний зсув (px), Вертикальний зсув (px), Розмиття (px) і Розтягування (px).
4. Виберіть Колір тіні палітрою або введіть будь-який CSS-колір у полі коду, а потім задайте Непрозорість (%). Позначте Усередині (внутрішня тінь), щоб малювати тінь усередині блока.
5. Налаштуйте Параметри перегляду (Колір блока, Колір тла, Радіус кутів (px)), щоб побачити тінь на ваших справжніх кольорах. Вони впливають лише на попередній перегляд.
6. Скопіюйте оголошення з CSS-код кнопкою Копіювати.

Клавіатура: наведіть фокус на точку в полі Зсув і стрілками переміщуйте її на 1 px, а із Shift – на 10 px.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Як працює box-shadow

Синтаксис однієї тіні: box-shadow: [inset] x y blur spread color.

• x та y зсувають тінь праворуч і вниз. Від’ємні значення зсувають її ліворуч і вгору. Джерело світла над елементом означає додатне y.
• Розмиття пом’якшує край. Воно не може бути від’ємним. Розмиття 0 дає копію блока з різкими краями.
• Розтягування збільшує (додатне) або зменшує (від’ємне) тінь до того, як її розмито. Від’ємне розтягування з великим y залишає тінь під елементом, а не навколо нього.
• Колір зазвичай має прозорість. Цей інструмент записує непрозорі кольори як HEX, а напівпрозорі як rgba(), що розуміє кожен браузер. Якщо ви введете колір, який уже має альфа-канал, Непрозорість (%) помножується на нього.
• inset розташовує тінь усередині рамки, наче блок вдавлено в сторінку.

Тінь повторює border-radius елемента й ніколи не змінює розмітку: вона не займає місця й не викликає смуг прокручування.

Навіщо накладати кілька тіней?

Справжні тіні – це не один розмитий прямокутник. Мала, темна й щільна тінь лежить прямо під предметом, а велика, ледь помітна й розмита поширюється далі. Накладання від двох до п’яти шарів імітує це і виглядає значно природніше за одну важку тінь. Шаблон Багатошарова на кожному кроці подвоює зсув і розмиття за низької непрозорості, і цей прийом популяризували багато дизайн-систем. Підйом наслідує тришарові тіні Material Design.

Перший шар у списку малюється поверх решти, точно так, як у значенні CSS. Порядок має значення переважно тоді, коли ви змішуєте внутрішні й зовнішні тіні або використовуєте насичені кольори.

Неоморфізм

Неоморфізм («м’який інтерфейс») використовує дві тіні на елементі того самого кольору, що й тло: темну із зсувом униз і праворуч та світлу із зсувом угору й ліворуч. Шаблон Неоморфізм задає для обох колір #e0e5ec. Пам’ятайте, що цей стиль має низький контраст, тому кнопки в ньому потребують чіткого стану фокуса й читабельних підписів.