Додавання Тіней для Глибини

Ми можемо використовувати тіні для створення візуального ефекту, коли елемент ніби плаває над фоном. Такий ефект додає глибини, виділяє окремі елементи та підвищує візуальну привабливість вебсторінки. Для цього застосовується властивість box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x — горизонтальне розташування тіні: додатне значення зміщує тінь праворуч від елемента, від’ємне — ліворуч;
• offset-y — вертикальне розташування тіні: додатне значення зміщує тінь вниз, від’ємне — вгору;
• blur-radius — ступінь розмиття тіні (необов’язковий параметр); чим більше значення, тим сильніше розмиття;
• spread-radius — також необов’язковий параметр, збільшує або зменшує розмір тіні залежно від знаку значення;
• color — задає колір тіні у будь-якому допустимому форматі (необов’язковий параметр).

Окрім властивості box-shadow, властивості text-shadow та drop-shadow дозволяють створювати тіні для тексту та інших елементів відповідно. Вони працюють так само, як і властивість box-shadow. Проте ці властивості використовуються рідше порівняно з box-shadow.