never forget

top partners | Free Divs | MySpace Layouts | MySpace Premade Layouts | Dark Graphics | Cool Layouts

myspaceprodesigns.com

css polaroid

menu

Your Ad Here

friends

Your Ad Here

layouts

Paint Div Layout by Chadd

Paint Div Layout

author: Chadd

Your Ad Here

new stuff

hot stuff

sponsors

Your Ad Here
blingcheese.compimper.orgrevolutionmyspace.compyzam.combigoo.ws

css polaroid

Everyone wants to make polaroid pictures without photoshop but they don't know how.  This really isn't that advanced, but does require that you know a bit more than the basics.

This is just for fun, so I hope you like it:

css polaroid

Taj Mahal

Here's how we did it:

<img src="URL_OF_PIC" style="border-top: 10px solid white ;border-left: 10px solid white;border-right: 10px solid white; border-bottom: 70px solid white;"><BR><BR><span style="top: -78px; left: 14px; font-size:22pt; color:black; font-weight:bold; font-family:papyrus; font-style:italic; position:relative;">TEXT</span>

URL_OF_PIC

- url of picture you would like to use

border-top;border-left;border-right;border-bottom

- there are three things associated with this - the first is the width of each border.  Note that the bottom border is set to be wider (70px) than the rest of the borders (10px) to give it the polaroid affect.  The second is the border style. We used a solid border.  The third is the color, which, in this case, is white

span style=

- top:-78px; is how far up you would like to shift the text.  This will vary with the size and family of font and your own personal preferences on where the text shows up.

- left:14px; is how far from the left margin you would like for the text to start.  This will vary with the number of characters of text if you want to center the text.  For example, if you want to text to be centered, a short word will have a higher margin-left than a long word.

- font-size:22pt; is how large you would like your font and purely a matter of personal preference.

- color:black; is the color of the font and is purely a matter of personal preference.

- font-weight:bold; should be used if you would like to bold your text.

- font-family:papyrus; is the font family (i.e., helvetica, arial, times, georgia, etc.) and is purely a matter of personal preference

- font-style:italic; should be used if you would like the text to be italic

- position:relative; tells our browsers that we want this text to to be rendered the given top and left distances from where the text would normally occur.

*if you would like to make the picture a link, just add <a href="URL_OF_LINK"> before the <img src=""> tag and </a> after the tag.

Comments

View Comments (0) •  Leave Comment  •  Support Forum