Помнится, в своё время с тенями было проблемно. Как правило, их делали путём перекрытия. Ну, знаете, так называемая «Луковая шелуха». Три слоя, каждый из которых содержит фрагмент изображения тени, накладываясь друг на друга, позволяют получить единую тень. То есть, это три элемента
создать надо было.
Некоторые сами рисовали картинку в том же Фотошопе сразу с тенями, потом нарезали и в табличной разметке вставляли потом.
Сейчас, благо CSS постоянно улучшается, можно всё одной строчкой сделать.
{box-shadow: 1px 2px 3px #ffffff}
- 1px – смещение тени по горизонтали (вправо на 1px);
- 2px – смещение тени по вертикали (вниз на 2px);
- 3px – растушевка тени (чем больше пикселей, тем более размытая тень);
- #000000 – цвет тени;
В box-shadow обязательны только два параметра:
box-shadow {inset 1 2 3 4 #5}
Обязательные:
- 1 — сдвиг по горизонтали;
- 2 — сдвиг по вертикали;
Не обязательные:
- inset — направление тени внутырь;
- 3 – растушевка тени (если не указана, то тень максимально жесткая как при 0px);
- 4 — радиус действия тени(если не указано тень не расширяется);
- 5 – цвет тени (если не указана, берется цвет текста);
В общем это всё в теории. Но на практике, как часто бывает, для разных браузеров по разному надо писать =\
Так что, вот пример:
{
-webkit-box-shadow: #333 2px 4px 4px;
-moz-box-shadow: #333 2px 4px 4px;
-o-box-shadow: #333 2px 4px 4px;
box-shadow: #333 2px 4px 4px; filter:progid: DXImageTransform.Microsoft.DropShadow(color=#999999, offx=2, offy=2);
}
Все строки по сути синонимичны, но нужны, чтобы работать под большей частью браузеров.
Единственный минус в том, что тени в CSS лишь с третьей редакции — поэтому на старых браузеров не будет работать.