Copy the CSS into a file called styles.css. Save this in the same directory as your HTML document. Be sure to not copy the advertisement copy that may appear within the code.
Add a link to this style sheet in your Web page:
<link href="styles.css" rel="stylesheet" type="text/css" />
The CSS
.image {
border: 2px solid #000000;
padding: 30px 15px 80px 15px;
background: #fff;
margin: 0;
}
img, {
margin: 0px;
}
.image, .polar {
position: relative;
bottom: 4px;
right: 4px;
}
.polar { background: #ccc; }
.contain { width: 434px;margin:15px; }
.caption {
position: relative;
top: -90px;left:20px;
font: 2em "Curlz MT", "Lucida Handwriting", "Comic Sans MS", cursive, fantasy;
}
If you change the image size, you'll need to change the width of the "contain" class to equal the width of the image plus 34 pixels (the width of the left and right padding plus the 2px border on each side).
Play with the fonts to get one that looks as much like handwriting as you can, but remember that the more original a font you put as your first choice, the fewer people will see it. So be sure to include generic fonts like cursive or fantasy.
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
Return to Polaroid or Instant Photo with CSS
More XHTML CSS Layout Templates
