СSS эффект изображение с тенью на сайте

Изображения и картинки на сайте оживляют его, делают сайт более динамичным и интересным. Предлагаю Вашему вниманию СSS эффект изображение с тенью на сайте – один из самых простых вариантов оформить изображения в статье – это изображения, которые отбрасывают тень. Выглядит это так:

Изображения с тенью для сайтов uCoz и сайтов с использованием lightbox

Чтобы сделать такой эффект для изображений на страницах сайта uCoz нужно поместить системный код изображения $IMAGE…$ внутри тегов

и добавить к этим тегам CSS стили.

HTML
HTML в этом случае будет выглядеть так:

<div class="image_shadow">$IMAGE...$</div>

Если у Вас другой не в системе uCoz, но вы используете lightbox и ваше изображение помещено внутри тегов <a> </a>, тогда этот вариант также вам подходит. Только вместо $IMAGE…$ должен размещаться весь вариант html кода изображения. Например

<div class="image_shadow"><a href="CCЫЛКА_НА_БОЛЬШОЕ_ИЗОБРАЖЕНИЕ"><img src="ССЫЛКА_НА_МАЛ_ИЗОБРАЖЕНИЕ" alt="Изображение с тенью" /></a></div>

CSS
Панель управления – Дизайн – Управление дизайном (CSS стили)
В самый конец всех стилей нужно вставить следующие:

/*Images in article*/ 
.image_shadow {padding: 10px;} 

  .image_shadow a img{ 
  width: 450px; 
  margin-left: 100px; 
  box-shadow: 3px 3px 10px rgba(0,0,0,0.8); 
  -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); 
  -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); } 
   
  /*END-Images in article*/

где width: 450px – это ширина изображения, и ее вы можете менять по своему усмотрению.

Эффект изображения с тенью для тега <img>

Если Ваш сайт создан не в системе uCoz или Вы просто хотите добавить тень к изображению, которое вставляется с помощью тега тогда и CSS стили и HTML немного отличаются.

HTML

<img class="image_shadow" src="ПУТЬ_К ИЗОБРАЖЕНИЮ" /> 

CSS

/*Images in article*/ 
.image_shadow { 
  width: 450px; 
  margin-left: 100px; 
  box-shadow: 3px 3px 10px rgba(0,0,0,0.8); 
  -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); 
  -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); } 
   
  /*END-Images in article*/