Ми можемо додати тінь до будь-якого елемента HTML за допомогою властивості CSS box-shadow. Ось як.
Додавання базової тіні краплі
Давайте спочатку налаштуємо деякі основні елементи HTML, щоб додати наші тіні:
Box1 Box2 Box3 Потім додайте кілька базових CSS:
p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }Результат - лише три чорні ящики, до яких нам буде легко додати тіні, викликавши їх унікальні ідентифікатори:
Щоб додати основну тінь, давайте використаємо box-shadowвластивість у полі 1:
/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
У нас тут 3 параметра. Перші 2 - це, відповідно, зміщення x та зміщення y. Вони встановлюють розташування тіні.
Зміщення відносно початку координат, яке в HTML завжди є лівим верхнім кутом елемента. Позитивне зміщення x змістить тінь праворуч, а позитивне зміщення x змістить тінь вниз.
Третій параметр - це колір вашої тіні.
Майте на увазі, що, хоча ми використовували тут елементи, box-shadowвластивість може бути застосовано до будь-якого іншого елемента HTML.
Додавання радіуса розмиття
Якщо ми хочемо, щоб тінь виглядала трохи реалістичніше, ми захочемо поекспериментувати з blur-radiusпараметром.
Цей параметр визначає, наскільки сильно розмивати тінь, щоб вона стала більшою та світлішою. Давайте застосуємо це до Вставки 2:
/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Значення 4px встановлює радіус розмиття, який застосовуватиметься до нашої тіні.
Додавання радіуса поширення
Якщо ми хочемо контролювати розмір тіні, ми можемо використовувати spread-radiusпараметр, який контролює, наскільки тінь зростає або зменшується.
Додамо радіус розповсюдження 8 пікселів до поля 2:
/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Запам’ятайте порядок цих параметрів!
Поєднання кількох тіней в одному ресурсі
Якщо ми хочемо пофантазувати, ми можемо додати кілька тіней до елемента, використовуючи одну box-shadowвластивість.
Давайте зробимо це з Box 3, одночасно додавши синю та зелену тіні:
/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
Бонус: Створіть Вставну Тінь
Хоча це не створює тінь, insetпараметр також може використовуватися з box-shadowвластивістю.
Як випливає з назви, цей параметр створює вставну тінь (тобто тінь всередині вікна).
insetПараметр може бути розміщений або на початку або в кінці
box-shadowмайно. Тут ми демонструємо його використання з blockquoteелементом.
HTML:
The key to success is to start before you're ready. — Marie Forleo
CSS:
blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Звичайно, ви можете додати трохи розмиття та розповсюдження, щоб посилити тінь, або навіть кілька тіней:
box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Завдяки box-shadowвластивості ми можемо легко виділити елементи веб-сторінки, щоб створити приємний ефект 3D-освітлення.
Якщо ви хочете самостійно експериментувати, ось кодова ручка, яку я створив на прикладах, використаних у цьому посібнику.
Пограйтеся і подивіться, що ви можете придумати!
Хочете побачити більше порад та знань щодо веб-розробки?
- Підпишіться на мій щотижневий бюлетень
- Відвідайте мій блог на 1000 Mile World
- Слідуйте за мною у Twitter