lowmanio.co.uk title image

Polaroid images

Thu, 06 Aug 2009 02:22PM

Category: Homemade arts & crafts

Written by Sarah | No comments

I've been experimenting with images and CSS on how to make an image look like it's been taken with a polaroid. You can see the results in the About me page. 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:

Polaroid image

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:

Tagged with: polaroid, CSS, retro

Comments

No comments.

Add a comment

captcha