CSS book cover

A few days ago, I posted my success at creating a realistic looking book cover. Now you can all see it here.

View->Source in order to see that the ONLY image is of the glacier. Everything else is done with CSS, margin positioning, text size and letter-spacing.

Some commentary on the piece. First, the entire piece is made up of three main sections or “div”s. The first is called header, has a black background and contains the book title in a golden color. The second contains a photo as a background with a black border all the way around. The third is the footer, and contains a negative margin large enough so that the authors name and the “forward…” text lies over the image.

About manipulating the text… In my “body” tag of the css, I specify a font size, even though very little of the text is in 12 pt. THis is so that I have absolute control over the positioning and spacing of the text. In the book title, you’ll see I specify 200% and 400% as font sizes. THis is releative to the 12 pt I specified originally. THis prevents the viewers browser from being able to resize the fonts and ruin my margins of the book cover spacing.

About the photo. It’s no the reall book photo, it’s a photo that my mother took in alaska. I selected a 600 pixel square portion of the photo with a relatively homogenous and darker bottom edge (the water) THis was so that I could overlay the footer text which can be easily read.

FInally, the little “Brad Pitt” piece. THis is a floating element to the right, which is contained inside the DIV that holds the photo. CSS will place a floating element as high as possible in it’s assigned box, in this case, the photo box. THat’s why it doesn’t float clear to the top of the page and lay over the book title.

My advice to anyone who wants to create clear, simple and elegant CSS: Understand the box model as described in the CSS specifications. SKip all of the online tutorials with the exception of one, “Colored Boxes” which describes a method similar to mine, and is where I got the idea for my approach. Create all of your margin/border/padding values yourself from the ground up after sketching your page on a blank sheet of paper.

My Book Cover was done in CSS 1.0 the simplest and most widely supported CSS. Don’t worry about hacks and browser support. Keep it simple, and you shouldn’t have any problems. (of course, if your browser doesn’t render my book page well, let me know what browser you’r using!)

Good luck with your designs!

Leave a Reply

Your email address will not be published. Required fields are marked *