Давно уже прошло то время, когда сайту простят то, что он выглядит не очень, но при этом весьма информативен или полезен. Сегодня, чтобы ткнуть пальцем в сайт и сказать что он хорош, необходимо не только содержать, но и выглядеть. Тем более, что и оформление не стоит на месте. Сколько уж всевозможных красивых штучек придумано в стилях, поэтому не воспользоваться ими было бы грешно.
Так вот, так как одной из основных форм предоставления информации были и есть картинки, то хотелось бы оформлять их красиво, с должным описанием. Именно оформлению картинки с описанием с блоком на ней, рядом с ней, я и хочу посвятить эту статью.
Начну с самых простых примеров, когда на картинке просто будет текст, то есть прямо поверх картинки, такое несколько деревенский стиль, но все же...
Пример 1
Смотреть код
Второй пример это отображение описание картинки в блоке, который по факту как бы находится поверх картинки
Пример 2
Смотреть код
Третий пример представляет собой уже можно сказать такую интегрированную систему, единый блок, где изображение и подпись с ней дополняют друг друга. Здесь я бы сказал важно использовать тень, она придает именно слитный стиль блокам.
Пример 3
Картинка и надпись в обрамлении единой тени.
Смотреть код
Смотреть код
Четвертый пример будет еще более продвинутый, возможно вам и не понадобиться подобное, но все же. Здесь будет картинки и надписи блоками, к тому же с кнопкой и кроме того, все они будут объединены в единый блок - строку.
Пример 4
Смотреть код