Підручник з CSS Box Shadow - Як додати тінь, що падає, до будь-якого елемента HTML

Ми можемо додати тінь до будь-якого елемента HTML за допомогою властивості CSS box-shadow. Ось як.

Додавання базової тіні краплі

Давайте спочатку налаштуємо деякі основні елементи HTML, щоб додати наші тіні:

 Box1 Box2 Box3 

Потім додайте кілька базових CSS:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Результат - лише три чорні ящики, до яких нам буде легко додати тіні, викликавши їх унікальні ідентифікатори:

Налаштування елементів HTML

Щоб додати основну тінь, давайте використаємо box-shadowвластивість у полі 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Додавання базової тіні до вікна 1

У нас тут 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; }
Додавання радіуса розмиття до поля 2

Значення 4px встановлює радіус розмиття, який застосовуватиметься до нашої тіні.

Додавання радіуса поширення

Якщо ми хочемо контролювати розмір тіні, ми можемо використовувати spread-radiusпараметр, який контролює, наскільки тінь зростає або зменшується.

Додамо радіус розповсюдження 8 пікселів до поля 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Додавання радіуса розповсюдження на додаток до розмиття до поля 2

Запам’ятайте порядок цих параметрів!

Поєднання кількох тіней в одному ресурсі

Якщо ми хочемо пофантазувати, ми можемо додати кілька тіней до елемента, використовуючи одну 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