За допомогою 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 генератор тіньових вікон (сміливо експериментуйте з віконними тінями)