Данный эффект можно использовать как для будущей галереи (фото или других графических работ), так и просто для красивого оформления картинки с подписью для статьи или страницы сайта. Помимо того, что вся конструкция представляет собой «плавающий» блок, здесь использован старый добрый метод, а именно: оформление границ блока бордером в 1 пиксель с разными цветами. За счет этого достигается эффект объема, и объект выглядит как фотокарточка. Как говорится — просто и сердито.

Для работы я взял небольшую картинку с чашкой полезного во всех отношениях зеленого чая. Размеры картинки 200х177 пикселей.

Сначала выпишем html-код страницы. Не весь, а только тот, что лежит между тэгами body:

<div class="imagewithtext">
<img src="tea.jpg" alt="tea">
<p>Моя любимая чашка чая</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam sit amet enim cursus eleifend …
… Ut non tortor non diam egestas elementum. Etiam aliquet. In auctor interdum lorem. </p>

Главную роль здесь играет блок (div) с классом imagewithtext. В блоке у нас лежит изображение с именем tea.jpg и подпись к ней «Моя любимая чашка чая». Ниже этого блока мы поместим абзац с тарабарским текстом. Он у нас будет играть роль текста окружающего изображение.

Теперь рассмотрим набор правил из листа стилей CSS для этой страницы:

.imagewithtext {
font-family: "Times New Roman", serif;
font-weight: normal;
width: 200px;
float: left;
display: inline;
border-color: #ccc #222 #222 #ccc;
border-width: 1px;
border-style: solid;
margin: 0 10px 5px 0;
padding: 0 10px 10px;
text-align: center;
}

С выбором семейства шрифтов и его толщиной все понятно. Ширину мы взяли в 200 пикселей. Используемая картинка также имеет ширину в 200 пикселей. Чтобы рамка, образованная бордерами, не примыкала вплотную к изображению, мы задали поля (padding) в 10 пикселей по бокам. Поле в 10 пикселей снизу отодвинет подпись «Моя любимая чашка чая» от края вверх на данное расстояние.

Чтобы картинка «плавала» в тексте статьи слева, мы задали соответствующее правило — float: left;

Интересное правило здесь — display: inline; Оно предназначено для старых версий IE, которые удваивали ширину поля с той стороны плавающего блока, который примыкал к соответствующей стороне окна браузера. Все остальные браузеры это правило проигнорируют.

Чтобы задать цвета каждой из сторон рамки (бордера) картинки, мы применили вот такую запись:

border-color: #ccc #222 #222 #ccc;

что означает: серый цвет сверху и справа, темно-серый — снизу и слева. Словно бы свет у нас падает на картинку из верхнего левого угла страницы. Два следующих правила задают толщину и фактуру рамки. При желании вы можете поиграться с отображением ширины и цветами рамки чтобы получить еще более реалистичный эффект. Например, можно задать разную толщину сторонам рамки. Если соответствующее правило переписать так:

border-width: 1px 2px 2px 1px;

то «тени» снизу и справа станут толще.

Отступы (margin) отодвигают изображение вместе с рамкой от окружающего текста. Справа на 10 пикселей, снизу на 5. Это сделано для того, чтобы текст не «прилипал» плотно к изображению.

Самое последнее правило — выравнивание подписи под картинкой по центру.

Чем удобна такая конструкция? Блок с картинкой и подписью можно двигать по полю страницы как угодно, и всегда подпись будет оставаться строго под картинкой и не потеряется. Можно саму подпись переместить в другое место, например, слева или справа от картинки. И точно так же перемещать весь блок в любое место страницы. Разместив несколько таких блоков подряд, можно получить простую галерею фоток с подписями.

Автор: Игорь Квентор

По материалам сайта: http://www.websovet.com/