Оформление
- 25 сентября 2014

Рамки не контрастного цвета. Фон – дело вкуса. Тени – скромные. Закругленные углы только в крайнем случае! :)
Наиболее критичны цвета.
Рамки черного или яркого цвета - кошмар!
Грязные тени, размытые на пол страницы - ужас!
Ядовитый фон - лучше не надо ...
И все-таки, мы его оформим
Рамки
Рамки задаем для контейнера.
.item-image { border: 1px solid #ddd; padding: 3px; /* отступ, определяет ширину рамки вокруг изображения */ background-color: #fff; }
Скругленные углы
Если задавать самим изображениям, то рамки лучше не использовать
.item-image img { border: 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .item-image { border:0; }
Если подобрать радиус, то можно сделать рисунки круглыми.
Тени
Баловство все это ... Но иногда можно.
.item-image { box-shasow: 2px 2px 8px #eaeaea; -webkit-box-shadow: 2px 2px 8px #eaeaea; -moz-box-shadow: 2px 2px 8px #eaeaea; }
Подпись под изображением
<!-- вставляем подпись в контейнер с изображением --> <div class="pull-left item-image"> <img src="pic.jpg" alt="test"> <span class="caption">Образец рисунка</span> </div> /* css-стили для подписи */ span.caption{ display: block; line-height: 1.1em; padding: 8px; }