Article
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes
Building the Page
The techniques for building this page will be very similar to the ones we used for the Edgy Eye-Candy flavor, except that the logo and copyright note will display in a two-column layout, without a separate header and footer area.
We'll start with the HTML page, structured like this:
retroWeb/index.htm (excerpt)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fictional Company</title>
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="leftcol">left</div>
<div id="maincol">main column</div>
<br class="clear">
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The style sheets for the body, wrapper, and columns are almost exactly the same format as the ones we used with the Edgy Eye-Candy flavor, with the dimensions modified slightly:
retroWeb/styles.css
html { margin: 0px; }
body {
background: #334392 url('images/background.gif');
text-align: center;
font: .7em Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
#wrapper {
margin: 0px auto; /* to fix centering in Mozilla */
background: url('images/bg.gif') repeat-y;
text-align: left;
width: 717px; /* width should be the same as the background image */
border-left: solid 1px #02092E;
border-right: solid 1px #02092E;
border-bottom: solid 1px #02092E;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 715px;
}
html>body #wrapper { width: 715px; }
#leftcol {
width: 155px;
float: left;
padding: 5px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 145px;
}
html>body #leftcol { width: 145px; }
#maincol {
width: 560px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 540px;
}
html>body #maincol { width: 540px; }
.clear { clear: both; }
The page currently looks like this:
Now I'll add the logo and left column navigation bar to the HTML page.
retroWeb/index.htm (excerpt)
<div id="leftcol">
<div id="logo">
<img src="images/logo.gif" width="128" height="98" alt="Fictional Company">
</div>
<ul class="verticalmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
For the vertical menu styles, I'll start with the same type of style definitions that I've used before. Note that I've defined a background image for both the normal link and hovered link pseudo-classes.
retroWeb/styles.css (excerpt)
.verticalmenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
color: #1A286E;
text-decoration: none;
text-align: center;
width: 141px;
height: 38px;
background: url('images/vertical.gif') no-repeat;
}
.verticalmenu a:hover {
background: url('images/vertical-over.gif') no-repeat;
}
When I preview the page, the navigation menu buttons show up. (Take note of the "hovered" button for "About Us.")
The text is "off," so we'll fix that with some padding (which requires the use of the box model hack). I give the hover state a bit more padding to account for the graphic effect of the button being "pushed."
retroWeb/styles.css (excerpt)
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
color: #1A286E;
text-decoration: none;
text-align: center;
padding-top: 10px;
width: 141px;
height: 38px;
background: url('images/vertical.gif') no-repeat;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 28px;
}
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, html>body .verticalmenu a:hover {
height: 28px;
}
.verticalmenu a:hover {
background: url('images/vertical-over.gif') no-repeat;
padding-top: 13px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 25px;
}
html>body .verticalmenu a:hover { height: 25px; }
Now the menu looks like this (again, with "About Us" in the hover state):
Now, to the body content. First, I'll add some dummy text and other structure tags to the HTML page:
retroWeb/index.htm (excerpt)
<div id="maincol">
<h1 class="title">Lorem ipsum</h1>
<div class="content">Content</div>
<div class="footer">Copyright statement</div>
</div>
For the title, I'll use CSS to display the image as a background image, and hide the text by setting a really large negative left indent. The cool thing about using this method (instead of replacing the text with an image, using the <img> tag in the HTML code) is that if a browser has CSS turned off, the viewer can still read the title. Other benefits include better search engine optimization, and getting well-structured page kudos!
Note: There are times when I wouldn't use CSS to replace text with an image, but would go ahead and embed the image into the HTML page. For instance, I'd do this if I had a heading that I wanted to be hyperlinked so that users could click on it.
Let's start by setting the background image of the title graphic in the style sheet:
retroWeb/styles.css (excerpt)
.title {
background: url('images/title.gif') no-repeat;
}
This is what the page looks like now:
I'll set a height for the title, to get the entire image to display:
retroWeb/styles.css (excerpt)
.title {
background: url('images/title.gif') no-repeat;
height: 56px;
}
Now I'll set the negative indent for the text. To counteract the negative margin, I set a position for the background image, and we're done with the title graphic!
retroWeb/styles.css (excerpt)
.title {
background: url('images/title.gif') 20000px no-repeat;
height: 56px;
margin-left: -20000px;
}
Note: Because you'll most likely have different title graphics for different pages, I'd remove the .title class from the main style sheet and embed it into the top of each page. You can then set different background images for different pages.
Are you ready to tackle the content area? We're going to use some nesting divs, like this:
retroWeb/index.htm (excerpt)
<div class="content">
<div class="contenttop">
<div class="contentbottom">Content</div>
</div>
</div>
The basic idea behind this method is that we'll attach the top border (with the rounded corners) to the .contenttop div, attach the bottom border to the .contentbottom div, and attach the middle background to the .content div. Because .contenttop and .contentbottom are nested inside the .content div, those background images will appear on top of the middle background image. We'll set some padding for .contentbottom for the text.
retroWeb/styles.css (excerpt)
.content {
width: 532px;
background: url('images/contentbg.gif') repeat-y;
}
.contenttop {
background: url('images/contenttop.gif') no-repeat;
}
.contentbottom {
background: url('images/contentbottom.gif') no-repeat bottom left;
padding: 10px 15px 10px 15px;
}
The page now looks like this:
A few more adjustments...
First, I'll set the other margins of the .title to "0" so that there's less space between the title and the content block.
retroWeb/index.htm (excerpt – style code in the <head> of the document)
.title {
background: url('images/title.gif') 20000px no-repeat;
height: 56px;
margin: 0px 0px 0px -20000px;
}
I make some minor adjustments for the footer div.
retroWeb/styles.css (excerpt)
#footer {
text-align: center;
font-size: .9em;
}
I also fix the logo div alignment so that it's centered.
retroWeb/styles.css (excerpt)
#logo { text-align: center; }
Now, I'll add the rest of the content. I decide to make another title graphic for a "second" section on the page, duplicate the .title class, renaming it .title2, and change the background URL:
retroWeb/index.htm (excerpt – style code in the <head> of the document)
<style type="text/css">
.title2 {
background: url('images/title2.gif') 20000px no-repeat;
height: 56px;
margin: 0px 0px 0px -20000px;
}
</style>
By duplicating what I've already done with the original title and content box, it's easy enough to create a second section on the page.
retroWeb/index.htm (excerpt)
<h1 class="title">Lorem ipsum</h1>
<div class=" content">
<div class="contenttop">
<div class="contentbottom">
<p>... dolor sit …</p>
</div>
</div>
</div>
<h1 class="title2">Integer nec orci</h1>
<div class="content">
<div class=" contenttop">
<div class="contentbottom">
<p>...dolor sit amet...</p>
</div>
</div>
</div>
And here's what it looks like:
Next, I'll create a style for headings that are within the white content area. This time, I want the HTML text to show up, but I want a background image behind it. Because I have a set height and padding, I have to use the box model hack again.
retroWeb/styles.css (excerpt)
.heading {
background: url('images/heading.gif') no-repeat;
height: 37px;
padding-top: 5px;
font: bold 1.4em Helvetica, Arial, Verdana, sans-serif;
margin-bottom: -10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 32px;
}
html>body .heading { height: 32px; }
Here's what it looks like:
As I look at the screenshot, I realize that I never changed the navigation font color and style from the previous Edgy Eye-Candy Flavor. In a final modification, I go back to the style sheet to make a quick change:
retroWeb/styles.css (excerpt)
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold .9em Verdana, Arial, Helvetica, sans-serif;
color: #8A4C03;
text-transform: uppercase;
text-decoration: none;
text-align: center;
padding-top: 11px;
width: 141px;
height: 39px;
background: url('images/vertical.gif') no-repeat;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 28px;
}
And at last, our Curiously Strong Retro Flavor page is done!
Click to view larger screenshot in a new window.
Click to view HTML page in a new window.
Click to view CSS file in a new window.
Retro Resources
If you're interested in getting more inspiration for retro designs, visit kelieresources.com for links to sites with retro clip art, colors, design and more.
Summary of Curiously Strong Retro Flavor
Let's review the additional skills you've learned in this section…
In Photoshop, you learned to:
- Use Define Pattern to capture a pattern.
- Use the Paint Bucket to apply a pattern.
- Use the Polygon tool to create a sun-ray graphic effect.
- Use Free Transform to change the shape of an object.
- Apply Strokes to help with a retro effect.
- Use the Character Palette to adjust the space between lines of text (the leading).
- Save images for Web using the Slice tool.
With HTML/CSS, you learned to:
- Create a two-image hover button effect using CSS.
- Display an image in place of text using CSS.
- Use nested divs to create a content area with a top and bottom border image.
- Add a background graphic to spice up a text heading.
Conclusion
There you have it: how to make sites that have that crisp and clean CSS flavor, or graphic-intensive table-less sites, from start to finish. You'll find that many of the basic techniques, like enhancing unordered lists for navigation menus, creating liquid or static-width layouts, and using nested divs for rounded corners on content areas, are tools that you'll draw on over and over again in CSS-based Web design. And if you're trying to improve your graphics skills, the many Photoshop tips and techniques in this article have hopefully given you a few more tricks to try!