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

Ми можемо використовувати тіні для створення візуального ефекту, коли елемент ніби плаває над фоном. Такий ефект допомагає створити глибину, виділити окремі елементи та додати візуальної привабливості вебсторінці. Для цього застосовується властивість 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.