CSS Polaroid Picture Tutorial

Made by: Nick

Polaroid pictures (or fake ones anyway) can be created using Photoshop or a similar graphics package but I aim to create the same kind of look by using CSS. I think it should be simple enough but we will find out shortly. Basically I want to create something like this:

heaven hell polaroid


The Code

<img src="Image_URL" style="border-top: 10px solid white ;border-left: 10px solid white;border-right: 10px solid white; border-bottom: 80px solid white;"><br /><br /><span style=" position:relative; top: -75px; left: 40px; font-size:20pt; color:black; font-family:Arial Rounded MT Bold, Verdana, sans-serif; font-style:italic; font-weight:bold;">Your_Text</span>

The Breakdown

I will break down the different sections of code and try to explain them for you.


The path or URL of the image you would like to use.

Img Style

There is some CSS attached to the image itself which creates a border around the image of 10 pixels on the left, top and right sides and a bigger border of 80 pixels on the bottom. This creates the polaroid style.

I should also note that the borders should be solid and white in colour.

Span Style

The span is there to hold the text we want to put on the bottom of the polaroid. What we do is place it in a span below the image and then re-position it using CSS to move it up on top of the polaroid image.

position: relative; - tells the users browser to re-position the contents of the span from where it was placed in the code.

top:-75px; - this is how we move the image up, the higher the negative number the more it will move up (you can change this if you like to position it where you like).

left: 40px; - this is how we move the text into the middle of the polaroid. You may need to change this depending on the size of your text and what font you use.

font-size: 20pt; is how big you want to make your text. It's up to you really.

color:black; is the colour of the font and again is up to you. You may want to use the hex code for colours instead of the colour name.

font-family: Arial Rounded MT Bold, Verdana, sans-serif; is the font you want to use. The first font is the first choice, the 2nd font is a 2nd choice (if the user doesn't have the first font on their computer) and the third is a default type of font. You can change this to whatever you like.

font-style:italic; should be used if you want the text to be italic.

font-weight:bold; should be used if you want to make the text bold.

That should be enough information to allow you to go and create some polaroids of your own!

Feed the Dragon MySpace Tutorials