Дизайнеры любят рисовать тени. А некоторые еще делают это поверх разноцветного фона. И многие из них даже не подозревают сколько проблем это создает верстальщику, особенно с IE. Однако с выходом в свет CSS3 эта проблема стала решаться легко и изящно. Ну или почти изящно. Итак, речь в этой статье пойдет о тенях в CSS.

В CSS3 для реализации тени (для блока) используется свойство box-shadow. Всего одно свойство, но с огромными возможностями. Синтаксис свойства box-shadow следующий:

CSS

box-shadow: inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

По порядку:

• inset — внутренняя тени
• сдвиг по x — смещение тени по горизонтали. Положительное значение сдвигает вправо относительно элемента, отрицательное — влево.
• сдвиг по y — смещение тени по вертикали. Положительное значение — сдвиг вниз, отрицательное — вверх.
• радиус размытия — радиус размытия тени, или растушевка. Чем больше значение, тем тень шире, светлее и более размытая. По-умолчанию размытие равно 0, тень четкая и не размытая.
• растяжение — размер тени. Положительное значение растянет тень, а отрицательное сожмет.
• цвет — цвет тени. По-умолчанию — черная.

Обратите внимание, что жирным я выделил обязательные параметры. Для отмены тени, как и везде используется значение none: box-shadow: none;.

Чтобы лучше понять как действуют те или иные параметры, проще всего обратиться к примерам. Начнем с простого и будем смотреть как повлияют другие параметры.

CSS

 div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow: 5px 5px #000; /* задаем сдвиг вправо и вниз по 5 пикселей */
}

Итак, мы видим блок с черной тенью. Тень, сдвинута относительно элемента на 5 пикселей вправо и вниз.

Теперь добавим размытия.

CSS

 div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow: 5px 5px 6px #000;
}

Тень осталась на том же месте, но стала размытой.

Чем больше задаем радиус размытия, тем тень становится светлее и шире. Например при радиусе размытия 20px получим следующее:

Обратите внимание, что при таком большом радиусе размытия, тень стала выглядывать и сверху над элементов и слева — тень расширяется.

Теперь перейдем к параметру размера тени. Чтобы не смешивать эффекты, уберем размытие.

CSS

 div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow: 5px 5px 0px 10px #000;
}

Имеем тень сдвинутую на 5 пикселей, но при этом расширенную в размере на 10 пикселей. Растяжение действует во всех 4-х направлениях. Очевидно, если мы не зададим сдвигов, а только растяжение, то получим ровную обводку из тени.

В теперь все вместе:

CSS

div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow: 5px 5px 6px 10px #000;
}

Внутренняя тень работает аналогично, но в обратном направлении, т.е. внутрь.

CSS

 div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow: inset 5px 5px 6px 10px #000;
}

Фактически, это получается зеркальное отражение относительно центра элемента.

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

CSS

div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #0f0;
box-shadow:  5px 5px #000, 7px 10px #900, -5px -5px #505;
}

Кроме всего, если задать элементу скругление углов при помощи border-radius, то и тень будет с закругленными углами.

А что с кроссбраузерностью?

Конечно же, ничего Свойство box-shadow поддерживают только браузеры дружащие с css3. Однако есть аналоги:

CSS

 -webkit-box-shadow: 2px 2px #000; /* Safari до версии 5.1, Chrome до версии 10.0 и iOS */
-moz-box-shadow: 2px 2px #000; /* Firefox до версии 4.0 */

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow, взамен можно использовать нестандартное свойство filter:

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Тень текста средствами CSS

для задания тени тексту используется свойство text-shadow. Оно не новое и было еще в CSS2, однако на тот момент не все браузеры его поддерживали. Сейчас же, последние версии всех нормальных браузеров (ну вы же понимаете какой браузер сюда не относится) поддерживают свойство text-shadow. Давайте рассмотрим его синтаксис:

CSS

text-shadow: <цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>

По порядку:

• цвет — цвет тени. По-умолчанию — цвет текста.
• сдвиг по x — смещение тени по горизонтали. Положительное значение сдвигает вправо, отрицательное — влево.
• сдвиг по y — смещение тени по вертикали. Положительное значение — сдвиг вниз, отрицательное — вверх.
• радиус размытия — радиус размытия тени. Чем больше значение, тем тень шире, более сглаженная, светлее и размытая. По-умолчанию размытие равно 0.

Обязательные параметры выделены жирным. Для отмены тени следует установить значение свойства в none. Можно задавать несколько теней, разделяя их между собой запятыми.
Учтите, что алгоритмы сглаживания у всех браузеров разные, поэтому тень в них может слегка отличаться.

Как видим, свойство text-shadow схоже со свойством box-shadow. И оно также не является кроссбраузерным. Тот самый браузер, который не вошел в понятие «нормальные», то есть Internet Explorer, не научился свойству text-shadow до 10 версии. Взамен используется свойство filter: Shadow(параметры). Например для задания красной тени текста, в направлении 90° от вертикали и смещения на 2 пикселя:

CSS

filter: Shadow(Color=#FF0000, Direction=90, Strength=2);

Источник