Создание подписей для изображений

наверх

Здравствуйте, уважаемые читатели!

Недавно я столкнулся с необходимостью создать для изображений подписи. И сейчас я хочу рассказать вам, как их сделать.

Приступим!

HTML

Все весьма просто. Мы добавим подпись в виде span и обернем все в один div.

<div class="img_container">
    <img class="img" src="i/1.jpg" alt="Подпись">
    <span>Подпись</span>
</div>

Как вам?

CSS

Со стилями дела обстоят так же просто. Сначала добавим стили для img_container. Обернем его в рамку, добавим небольшую тень и сделаем отступы от текста, чтобы все выглядело красиво.

.img_container {
    width: 400px;
    border: 1px solid #eee;

    /* небольшие отступы, чтобы текст не прилипал к изображению */
    margin: 6px 20px 20px 0;

    float: left; /* чтобы текст обтекал изображение */

    /* создадим небольшую тень */
    -webkit-box-shadow: 0px 2px 9px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 2px 9px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 2px 9px rgba(50, 50, 50, 0.5);

}

Промежуточный результат:

Практически готово! Осталось лишь дописать несколько строк для того, чтобы стилизовать текст нашей подсказки и поправить отступы.

img {
    /* так мы уберем лишний отступы у изображения */
    display: block;
    border: none;
}

span {
    background-color: white;
    display: block;

    /* добавим отступы со всех сторон */
    padding: 15px;

    /* стилизуем текст подсказки */
    color: #999;
    font: 11px/16px Tahoma;
    font-style: italic;
}

И вот наш результат:

Готово!

Как видите, все оказалось очень просто.

Для продвинутых

В данном примере я вижу один минус. Мы для img_container задали жесткую ширину. Если ее не задавать, то при очень длинной подсказке у нас будет ломаться наша верстка.