Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Тіні | Декоративні Ефекти
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

bookТіні

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

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

index

css

index

js

index

copy

Примітка

Щоб знайти найбільш підходящу тінь, відвідайте джерело генератор тіней.

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

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

Як ми можемо покращити це?

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

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