Box-shadow • Про CSS
Властивість box-shadow дозволяє додати елементам одну або кілька тіней.
Синтаксис дуже простий:
Цей код дасть ось таку тінь:
Перше значення відповідає за відступ ліворуч, друге зверху. Значення може бути негативними. Третє – радіус розмиття. Якщо значення не встановлено або дорівнює 0 — тінь має чіткі краї. Четверте – зменшення чи збільшення тіні. Значення може бути негативними.
На жаль, значення попередніх властивостей не можуть бути задані у відсотках.
Останнє значення – колір. Дуже зручно задавати його в hsla або в rgba, щоб тінь була прозорою і затемняла фон нижче незалежно від його кольору.
Немає можливості перевизначити лише колір тіні, для цього доведеться продублювати всі значення.
Є ще один параметр - inset. Якщо він заданий, тінь відкидається усередину елемента.
При використанні кількох тіней вони задаються одна за одною через кому.
На відміну від градієнтів, тіні анімуються, тому в деяких випадках їх можна використовувати замість градієнтів.
При цьому, якщо тіней кілька, зміна порядку заданих тіней при анімації дає цікавий ефект:
З тінями можна зробити багато цікавого, від, власне, тіней до різноманітних декоративних елементів.
Кожен із прикладів нижче зроблений за допомогою тіней на основі одного дива, в деяких використовуються псевдоелементи:
Ще можна зробити веселку:
Або ось, наприклад, гудзики:
Або міхур із текстом:
Просто дивовижна кількість можливостей надає таку просту властивість.
Також останнім часом стають популярними довгі тіні (в даному випадку це box-shadow + text-shadow):
Суть способу полягає у використанні безлічі тіней, при цьому найближчі дофігурі мають колір, власне, тіні, а далекі від неї плавно переходять до кольору тла. Використовувати rgba з прозорістю тут не вийде, бо тоді тіні просвічуватимуть один під одним.
Руками такі штуки писати незручно, тому простіше буде скористатися генераторами:
Мінус способу полягає в тому, що тіні можна накласти лише поверх однорідного тла, але при розумному використанні вони виглядають дуже ефектно.