Polaroid images

I’ve been experimenting with images and CSS on how to make an image look like it’s been taken with a polaroid. I still own a polaroid, and have about 2 photos left. Pity they don’t make them any more 😦

Polaroids are roughly square, I have made mine 307px by 319px. I created a background of that size that was dirty off-white, which you are free to use:

I edited this and put a caption underneath in a handwritting style font called ‘Never Let Go’ which is free and can be found at DaFont.com.

The HTML

<div class="polaroid">
   <img src="image_inside_the_polaroid.jpg" class="polaroid" />
</div>

The CSS

img.polaroid{
	margin: 15px 16px 0px 16px;
	width: 271px;
	border: solid 1px grey;
}


div.polaroid{
	border: solid 1px black;
	float:left;
	width: 305px;
	height: 317px;
	background-color: white;
	margin-bottom:20px;
	background-image: url('polaroid.jpg');
}

End result: