Тени CSS3 (Shadows)

Используя CSS3, вы можете применить тень к элементам.

Использование тени в CSS3

CSS3 позволяет добавлять тень к элементам, как в Photoshop, без использования изображений. До CSS3 для создания тени вокруг раздражающих элементов использовались нарезанные изображения.

В следующем разделе будет рассказано, как применять тени к тексту и элементам.

Атрибут box-shadow в CSS3

Атрибут 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 CSS3

Вы можете использовать свойство text-shadow, чтобы применить тень к тексту. Вы также можете использовать аналогичное представление для применения нескольких теней тексту, как в box-shadow.

h1　{
　　　　text-shadow:　5px　5px　10px　#666;
}
h2　{
　　　　text-shadow:　5px　5px　10px　red,　10px　10px　20px　yellow;
}