Нет, это не очередной урок обработки фотографий в фотошоп, это очень эффектная и простая техника по оформлению картинок с помощью css.
Для лучшей понятности разделю этот урок на три этапа сложности, от самого элементарного до продвинутого.
Этап первый
К примеру у нас есть фотография.
Теперь оформим ее.
Для отображения этой фотографии на полароиде нам понадобится маленькая заготовочка.
Теперь совместим рисунок полароида и нашу фотографию, с помощью несложного css кода
img.polaroid {
padding:10px 10px 30px 10px;
background:#fff url(polaroid.gif) no-repeat;
}У нас получится следующее.
Сразу выглядит намного интересней.
Этап второй
Теперь усложним задачу, добавим к нашей фотографии описание.
Создаем блок в котором будет находится наша фотография.
С мужиками на природе
Оформляем его с помощью 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.
Теперь всё, с чистой совестью прощаюсь с вами!
Посмотреть пример окончательного варианта
Скачать пример
Источник — Чернев.Ру
