Introductory images are most typically seen on designers’ weblogs but these images are a fun way for anyone to introduce a post.
As the name suggests, introductory images appear at the beginning of the text. However,
you can give them a lot more impact by playing around with their placement via the
manipulation of their borders and padding values.
Using Borders and Padding
Let’s work through an example, which you can see in Figure 2.16, that uses borders and
padding to extend an image beyond the width of the page content. This approach makes
the layout a little more interesting, and makes the image seem more deliberate—it doesn’t
seem as if it’s just been “placed” there.It’s very easy to create this look. We start with the proper markup—simply replace the text
and images used here with the content that you want:
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
/>
Introductory Images
The “Cat Vase” that won’t go away.
Published on Saturday, September 23, 2006, at 4:00pm
by
The content and image are contained within a div with a class of content, and we’ve
applied a class of intro to the image. The result is shown in Figure 2.17.
Now, we’ll style the page’s typography, and apply the colors for its background, border, and
font. These styles are merely applied for the sake of the page design, and are not required
by the introductory image itself:
intro
body {
margin: 0;
padding: 0;
background-color: #fff;
font: 62.5%/1.75em “Trebuchet MS", Verdana, sans-serif;
text-align: center;
color: #4d4d4d;
}
#content {
margin: 0 auto;
padding: 1em 0;
width: 500px;
background-color:#fff;
font-size: 1.125em;
line-height: 1.75em;
text-align: left;
}
a:link, a {
border-bottom:1px dotted #960;
color: #960;
text-decoration: none;
}
h1 {
margin: 0;
padding: 0;
border-bottom: 3px solid #eee;
font: 2.75em/1.75em Georgia, serif;
text-align: center;
text-transform: lowercase;
color: #cc6;
}
p {
margin: 0;
padding: 0 0 1em 0;
}
cite {
display: block;
margin-top: 2em;
font-style: normal;
font-size: 1em;
line-height: 1em;
text-align: center;
}
Now, we style the image. We’ll add 4px of padding, and a 3px border with a double style, so
that the image has what appears to be two borders surrounding it:
intro-image.css (excerpt)
img.intro {
padding: 4px;
border:3px double #ccc;
background-color: #fff;
margin:0 -7px;
}
The container is 500px wide, so the text stays within those boundaries. The image is also
500px wide, but since we’ve applied padding and border properties to it as well, we need
to compensate for them. Due to the 4px padding and 3px border, our intro image needs to
have a negative margin of 7px on the left and right to allow the border properties to extend
beyond the #content div. The padding and border properties can be adjusted to suit your
taste; just make sure that the negative margin is the same as the total of your padding and
border properties.
In Figure 2.18, we see an image that’s 500px wide—the same as the content area.
No comments:
Post a Comment