beget banner 468x60beget banner 728x90beget banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

Руководство по созданию тени в 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-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;
}
kwork banner 480x320kwork banner 728x90kwork banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

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

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

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

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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее