Ефекти тіні CSS і Box Shadow (з прикладами)

За допомогою CSS3 ви можете створювати два типи тіней: text-shadow(додає тінь до тексту) і box-shadow(додає тінь до інших елементів).

Тінь тексту CSS3

text-shadowВластивість може приймати до чотирьох значень:

  • горизонтальна тінь
  • вертикальна тінь
  • ефект розмиття
  • колір
Приклади:

Звичайна тінь тексту

h1 { text-shadow: 2px 2px 5px crimson; }
Приклад звичайного тіньового тексту

Світиться ефект тексту

h1 { text-shadow: 0 0 4px #00FF9C; }
Приклад світиться тексту

Кілька тіней

Щоб досягти цього, ви просто додаєте кому між двома (або більше) наборами значень:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Приклад декількох тіней з білим текстом

CSS3 Box Shadow

box-shadowВластивість може зайняти до шести значень:

  • (необов’язково) insetключове слово (змінює тінь на одну всередині кадру)
  • горизонтальна тінь
  • вертикальна тінь
  • ефект розмиття
  • поширення
  • колір
Приклади:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Приклади для тіньових вікон

Більше інформації:

  • Веб-документи MDN
  • Перевірте підтримку браузера
  • CSS генератор тіньових вікон (сміливо експериментуйте з віконними тінями)