Polaroid photos

No, this is not just another lesson on photo processing in Photoshop, this is a very effective and simple technique for creating images using css.

For better clarity, I will divide this lesson into three stages of complexity, from the most elementary to the advanced.

Stage One

For example, we have a photo.


')


Now we will issue it.
To display this photo on the Polaroid we need a little blank.

Now we combine a polaroid drawing and our photo, using a simple css code

img.polaroid {
padding:10px 10px 30px 10px;
background:#fff url(polaroid.gif) no-repeat;
}

We will have the following.

Immediately looks much more interesting.

Stage Two

Now let's complicate the task, add a description to our photo.
Create a block in which our photo will be located.






We make it with 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;
}

We get a more interesting picture.

In my opinion it turned out great!

Stage Three

I could finish the lesson, but no, it seemed to me that it was very tedious every time to make out the necessary photos using html code and therefore I solved this problem using jQuery.
The script will process the necessary photos by itself and add to them a polaroid and a description (taken from alt).

$(document).ready(function() {
$("img").each(img);
function img()
{

var desc = $(this).attr("alt");

$(this).wrap("").parent()
.addClass("polaroid").append('')
.find('p').append(desc);
};
});

I ask you not to scold me for this code, I just started learning jQuery.

Now everything, with a clear conscience, I say goodbye to you!

View an example of the final version.
Download an example

Source - Chernev.Ru