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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.