Polaroid Picture Borders
CSS Inline Style
Combining Borders and Text Overlay
Noded is posting photographs with a Polaroid style border.
The border looks like this.
Image by TypoGenerator
Copy and paste this in your Blog or Web page.
It will look like this.
Image by TypoGenerator
CSS Style for Polaroid Border
For one-time or occasional use CSS Inline Style works fine.
If you want to reuse the Polaroid effect you can add the style
to your external style sheet or in the HEAD section
of your page.
We used an image that is the same size as a Polaroid, a 216 x 216 pixel square, but the borders work well on any image size. The trick was to use negative spacing to move the text Image by TypoGenerator up inside the border.
Where do you put the style code?
If you are using a template look for
the <style type="text/css"> and
put the code below it. Noded added a class
named polaroid to the style sheet
for easy reference. The style looks something like this.
CSS
To reference polaroid and polaroidtext type this in your Blog or Web page.
Code to type in your Blog or Web page
It will look like this.