Изображения и картинки на сайте оживляют его, делают сайт более динамичным и интересным. Предлагаю Вашему вниманию СSS эффект изображение с тенью на сайте — один из самых простых вариантов оформить изображения в статье — это изображения, которые отбрасывают тень. Выглядит это так:
Изображения с тенью для сайтов uCoz и сайтов с использованием lightbox
Чтобы сделать такой эффект для изображений на страницах сайта uCoz нужно поместить системный код изображения $IMAGE…$ внутри тегов
и добавить к этим тегам CSS стили.
HTML
HTML в этом случае будет выглядеть так:
|
1 |
<div class="image_shadow">$IMAGE...$</div> |
Если у Вас другой не в системе uCoz, но вы используете lightbox и ваше изображение помещено внутри тегов <a> </a>, тогда этот вариант также вам подходит. Только вместо $IMAGE…$ должен размещаться весь вариант html кода изображения. Например
|
1 |
<div class="image_shadow"><a href="CCЫЛКА_НА_БОЛЬШОЕ_ИЗОБРАЖЕНИЕ"><img src="ССЫЛКА_НА_МАЛ_ИЗОБРАЖЕНИЕ" alt="Изображение с тенью" /></a></div> |
CSS
Панель управления — Дизайн — Управление дизайном (CSS стили)
В самый конец всех стилей нужно вставить следующие:
|
1 2 3 4 5 6 7 8 9 10 11 |
/*Images in article*/ .image_shadow {padding: 10px;} .image_shadow a img{ width: 450px!important; margin-left: 100px!important; box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; } /*END-Images in article*/ |
где width: 450px — это ширина изображения, и ее вы можете менять по своему усмотрению.
Эффект изображения с тенью для тега <img>
Если Ваш сайт создан не в системе uCoz или Вы просто хотите добавить тень к изображению, которое вставляется с помощью тега тогда и CSS стили и HTML немного отличаются.
HTML
|
1 |
<img class="image_shadow" src="ПУТЬ_К ИЗОБРАЖЕНИЮ" /> |
CSS
|
1 2 3 4 5 6 7 8 9 |
/*Images in article*/ .image_shadow { width: 450px!important; margin-left: 100px!important; box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8)!important; } /*END-Images in article*/ |