Изображение с подписью и эффектом тени для сайта
Этот эффект можно использовать как для будущей галереи (фото или других графических работ), так и просто для красивого оформления картинки с подписью для статьи или страницы сайта.
Помимо того, что вся конструкция представляет собой «плавающий» блок, здесь использован старый добрый метод, а именно: оформление границ блока бордером в 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. Это сделано для того, чтобы текст не прилипал плотно к изображению.
Самое последнее правило — выравнивание подписи под картинкой по центру.
Чем удобна такая конструкция? Блок с картинкой и подписью можно двигать по полю страницы как угодно, и всегда подпись будет оставаться строго под картинкой и не потеряется.
Можно саму подпись переместить в другое место, например, слева или справа от картинки. И точно так же перемещать весь блок в любое место страницы.
Разместив несколько таких блоков подряд, можно получить простую галерею фоток с подписями.
