Вивчайте Додавання Тіней для Глибини та Стилю | Додавання Декоративних Ефектів за Допомогою CSS

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

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

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

index.html

index.css

Примітка

Щоб підібрати оптимальну тінь, відвідайте джерело генератор тіней.

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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 5

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me an example of how to use the box-shadow property in CSS?

What are some common use cases for box-shadow on a webpage?

How do I choose the right values for box-shadow to achieve a realistic floating effect?

Свайпніть щоб показати меню

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