2.9 KiB
2.9 KiB
title | localeTitle |
---|---|
CSS3 Shadow Effects | Теневые эффекты CSS3 |
Теневые эффекты CSS3
С помощью 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 box-shadow generator (не стесняйтесь экспериментировать с тенями)