Руководство по созданию тени в CSS3

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{
    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;
}