Создаем блоки с тенью / эксперименты со свойством box-shadow / css3
Box-shadow. Что это такое и с чем его е*ят - применяют. Похожее (по работе) свойство мы уже разбирали - text-shadow. Это же, отличается тем, что применяется не к тексту, а к блокам (контейнерам). Как можно понять из названия, добавляет самую обычную (ну не совсем) тень к блоку (контейнеру). Особенность в том, что тень можно регулировать - вылет тени, цвет, размытие и растяжение. Если не ошибаюсь, то это новое свойство.
Ознакомимся с синтаксисом. Выглядит он так:
box-shadow:1px 2px 3px 4px #000;
где 1px - смещение тени на 1px вправо (чтобы сместить влево, надо задавать отрицательное значение), 2px - смещение на 2px вниз (чтобы сместить вверх, надо задавать отрицательное значение), 3px - размытие тени (чтобы тень была четкой, присвойте значение 0), 4px - растяжение тени (чтобы сделать сужение, надо задавать отрицательное значение - данный параметр можно не задавать) и #000 - цвет тени (можно задавать в формате rgba).
Кстати, не забываем, что для одного элемента можно задавать несколько теней (через запятую: box-shadow:2px 2px 2px red, -2px -2px -2px blue;).
Также это свойство позволяет отобразить тень не снаружи блока, а внутри. Для этого, в начале добавьте: inset. Например:
box-shadow:inset 1px 2px 3px 4px #000;