CSS тень у блока

Чтобы создать тень у блока, я создал изображение и воспользовался CSS.

Сейчас тень можно создать, используя только CSS. Ниже приведены ссылки на руководства, как это можно сделать.

• Создаем красивые тени с помощью свойства CSS3 box-shadow

Эффект границы и отбрасываемой тени я получил, воспользовавшись следующим CSS кодом для тега span и самого изображения (img) (применимо также к любому блочному элементу). Код этот нужно добавить к вашему css-файлу.

CSS

/*блочный элемент*/
.post-thumbnail {
background: none repeat scroll 0 0 #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
float: left;
margin: 0 15px 0 10px;
padding: 7px;
border: 1px solid #B6C1C6;
}

.post-thumbnail:hover {
border: 1px solid #ededed; 
background:#ededed;   
}

/*тень*/
span.shadow{ 
display:block; 
/*позиционируем под блочным элементом*/
position:absolute; 
top:153px; 
left:10px; 
background:url(../../images/shadow_ava.png) no-repeat; 
width:148px; 
height:19px;  
}

Использовал я следующий файл изображения. Если размер вашего блока отличается от размера файла изображения, эффект границы и отбрасываемой тени работать не будет. Решением этой проблемы будет создание нового фонового изображения тени
(рекомендую воспользоваться статьей как создать тень у основания сайта ),
либо использование приведенных мною выше CSS решений. Также, при необходимости, размеры изображения можно подогнать под требуемые через атрибуты тега img width или height. Также стоит, наверное, напомнить, что свойства height или width прописанные для тега img непосредственно в css файле, имеют более высокий приоритет, чем встроенные атрибуты тега img (width, height). Поэтому, например, если редактор загружает через админку изображение какого угодно размера (плохой редактор, видимо), то прописав в файле css, например width:100px; и height:auto; изображение автоматически изменит пропорционально свои размеры до 100px ширины и до адекватной высоты.

Конечно же, ограничивать себя этим дизайном не стоит. В CSS дизайн блока можно делать каким угодно и конечный результат зависит только от вашего воображения и умений.

В демо можно увидеть, как выглядит тень у блока.