CSS3 дает вам возможность добавлять эффекты тени к элементам, так же как вы делаете в Photoshop, без использования каких-либо изображений. До CSS3 использовались нарезанные изображения для создания теней вокруг элементов, что было довольно утомительно.
Теперь рассмотрим, как создать тень для текста или блочного элемента.
Свойство box-shadow
Свойство box-shadow
можно использовать для добавления тени к блочным элемента. Вы можете даже применить несколько теневых эффектов, используя список теней через запятую. Основной синтаксис создания тени блока может быть задан с помощью:
box-shadow: offset-x offset-y blur-radius color;
Компоненты свойства box-shadow
имеют следующее значение:
- offset-x — Устанавливает горизонтальное смещение тени;
- offset-y — Устанавливает вертикальное смещение тени;
- blur-radius — Устанавливает радиус размытия. Чем больше значение, тем больше размытие и тем больше размытость края тени. Отрицательные значения не допускаются;
- color — Устанавливает цвет тени. Если значение цвета опущено или не указано, оно принимает значение свойства
color
текущего элемента.
См. CSS3-свойство box-shadow
, чтобы узнать больше о других возможных значениях.
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
При добавлении box-shadow
, если значение для компонента радиуса размытия не указано или установлено в ноль (0
), края тени будут четкими.
Точно так же вы можете добавить несколько теней используя список через запятую:
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
Свойство text-shadow
Вы можете использовать свойство text-shadow
, чтобы применить эффекты тени к тексту. Вы также можете применить несколько теней к тексту, используя те же обозначения, что и box-shadow
.
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}