Полароидные фотографии
Нет, это не очередной урок обработки фотографий в фотошоп, это очень эффектная и простая техника по оформлению картинок с помощью css.
Для лучшей понятности разделю этот урок на три этапа сложности, от самого элементарного до продвинутого.
Этап первый
К примеру у нас есть фотография.
Теперь оформим ее.
Для отображения этой фотографии на полароиде нам понадобится маленькая заготовочка.
Теперь совместим рисунок полароида и нашу фотографию, с помощью несложного css кода
img.polaroid {
padding:10px 10px 30px 10px;
background:#fff url(polaroid.gif) no-repeat;
}
У нас получится следующее.
Сразу выглядит намного интересней.
Этап второй
Теперь усложним задачу, добавим к нашей фотографии описание.
Создаем блок в котором будет находится фотография.
<div class="polaroid"><img src="foto.jpg" alt="foto" />
С мужиками на природе</div>
Оформляем его с помощью css.
.polaroid {
width:130px;
height:150px;
background:url(polaroid.gif) no-repeat;
color:#888;
font:11px arial, sans-serif;
margin: 10px;
}
.polaroid img {
padding:15px 15px 0 15px;
}
.polaroid p {
padding:0;
margin:3px 15px 0 15px;
}
Получаем более интересную картину.
На мой взгляд отлично получилось!
Этап третий
Я мог бы закончить урок, но нет, мне показалось, что очень нудно каждый раз оформлять нужные фотографии с помощью html кода и поэтому я решил эту проблему с помощью jQuery.
Скрипт будет сам обрабатывать нужные фотографии и добавлять к ним полароид и описание(взятое из alt).
$(document).ready(function() {
$("img").each(img);
function img()
{
var desc = $(this).attr("alt");
$(this).wrap("
").parent()
.addClass("polaroid").append('')
.find('p').append(desc);
};
});
Прошу не ругать меня за этот код, я только начал изучать jQuery.
Теперь всё, с чистой совестью прощаюсь с вами!
Ну это всё хорошо но не сделаешь для публичного проекта. У вас фон фиксированного размера в смысле высоты. И стоит написать чуть более одной строчки то всё поедет. То что длинные слова превышают допустимую ширину это везде так, но вниз оно должно расти уметь, если есть описание.
Вы правы, это решение именно для изображений с фиксированными размерами. Если будет время и кому то это интересно, то я попробую написать как сделать растягивающийся вариант.
Отличная статья… спс! )
Однозначно зачётно получилось))респ)
Тоже думал над подписями к изображениями, но тут небольшая проблема в том как это визуально будет совмещаться с остальным текстом и другими изображениями. Всё-таки сетка более простая, а если и надо отдельное изображение для статьи то это делается уже под конкретный дизайн, так что это решение хоть и наглядное но не стоит делать растягивающиеся варианты – кому надо тот сам разрежет (ergo Krov).
Поздравляю с формой комментариев как у Бирзула :)
Тут можно сказать 50/50, он мне подсказал оформление, я ему реализацию своей фишки с запоминанием юзера :-)
Извиняюсь за небольшой оффтоп и свою CSS и JavaScript неграмотность…
Сначала, большой респект автору сайта. Реально полезный материал! Я вот недавно сделал свой бложик (), прикрутил туда по фану lavalamp menu (). Не подскажешь, как без вреда внешнему виду тоже изменить размер (например сделать пошире, чтоб больше текста влезало). Простое увеличение width не канает – все косячится:)
Заранее спасибо!
Вы копали в правильном направлении, всё это меняется с помощью настроек css, видимо не совсем правильно изменили — вот и разьехалось.
Понравилось применение jQuery
Где б толковые мануалы почитать?
Антон, не поверите: