Здравствуйте, уважаемые читатели!
Недавно я столкнулся с необходимостью создать для изображений подписи. И сейчас я хочу рассказать вам, как их сделать.
Приступим!
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 задали жесткую ширину. Если ее не задавать, то при очень длинной подсказке у нас будет ломаться наша верстка.
Если вы знаете, как это поправить, то напишите, пожалуйста, в комментариях. Я буду очень рад 🙂
Спасибо за внимание!
Подписывайтесь на рассылку! 😉