
Бокс Тень
С помощью CSS3 вы можете создавать теневые эффекты!
CSS3 эффект тени
С помощью CSS вы можете добавить тень к тексту и элементам.
В этой главе вы узнаете о следующих свойствах:
text-shadow
box-shadow
CSS тень текста
CSS свойство text-shadow
применяет тень к тексту.
В простейшем случае можно указать только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):
Эффект тени текста!
h1 {
text-shadow: 2px 2px;
}
Попробуйте сами »
Сначала, добавить цвет к тени:
Эффект тени текста!
h1 {
text-shadow: 2px 2px red;
}
Попробуйте сами »
Затем добавьте эффект размытия в тень:
Эффект тени текста!
h1 {
text-shadow: 2px 2px 5px red;
}
Попробуйте сами »
В следующем примере показан белый текст с черной тенью:
Эффект тени текста!
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Попробуйте сами »
Следующий пример показывает красную неоновую тень:
Эффект тени текста!
h1 {
text-shadow: 0 0 3px #FF0000;
}
Попробуйте сами »
Несколько теней
Чтобы добавить в текст несколько теней, нужно добавить список теней разделенные запятыми .
Следующий пример показывает красную и голубую неоновую тень:
Эффект тени текста!
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Попробуйте сами »
В следующем примере показан белый текст с черной, синей и темно-синей тенью:
Эффект тени текста!
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Попробуйте сами »
Можно также использовать свойство text-shadow
для создания простой границы вокруг текста (без теней):
Граница вокруг текста!
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Попробуйте сами »