CSS : Designing with CSS - [10] Introduction

Although web builders often spend a lot of time working around browser bugs and reading about the latest tricks from the gurus, it's worth remembering that foremost, we're designers and CSS is simply a way to turn design ideas into reality.

CSS is the perfect technology for grabbing the attention of visitors to a web site. With CSS, instead of hacking HTML tables and slicing images to create eye-catching designs, you can go further with valid markup and still save on file sizes by ditching excess HTML and images. In short, you can do what any professional web designer should: create maximum impact with minimal resources.

At a basic level, a developer can learn all there is to know about CSS syntax and the technical limitations of the technology. But let's never forget that code merely implements the design. At its heart CSS is a visual language, and with that comes the need to understand, at least in some small way, how to use design principles with CSS.

With that in mind, this chapter explains how to design with CSS. Specifically, this chapter describes several methods for capturing attention through CSS-enabled techniques, including how to lead the eye with contrast, use excessively large text, create word balloons out of quotations, and use different image formats to create cohesive presentations.

CSS : Designing with CSS - [10.1] Enlarging Text Excessively

Problem

You want to draw attention to a web page by enlarging some of the text as shown in Figure 10-1.

Figure 10-1. An example of excess type size

Solution

Increase the size of the heading so that it is out of proportion with the rest of the text. First use this HTML:

<h1>Hi.</h1>

Then use this CSS code:

h1 {

 font-size: 17em;

 margin: 0;

 padding: 0;

 text-align: center;

 font-family: Arial, Verdana, Helvetica, sans-serif;

}

Discussion

Obviously, any element that's larger than the other elements in the same environment stands out. So, when you want to call attention to an area of a web page, try using an excessive type size.

In this example, the size of the font in the word "Hi." has been set to 17em. In the font-size property, an em unit is equal to whatever the font-size of the container is. So, 17em units is equal to 17 times the default font size. There is no theoretical limit to how large you can size text, but in practice different browsers do max out at some point. Not everyone will have a monitor that's large enough to see type that is 1 mile (or 63,360 inches) tall:

h3 {

 font-size: 63360in;

}

CSS : Designing with CSS - [10.2] Creating Unexpected Incongruity

Problem

You need to grab the reader's attention by using two elements that don't seem to fit together.

Solution

Place one element visually inside the other. In the web page shown in Figure 10-2, which covers Earth's close call with an asteroid, an image of Earth from space was placed over an image of a game of pool.

Figure 10-2. An image of Earth placed over an image depicting a game of pool

The HTML for this page is simple:

<h2><span class="no">Earth News</span></h2>

<p>Earth escapes potential impact with killer asteroid; 

will we escape the next one in 2014? <a href="more.html">Read 

more</a></p>

For the CSS, place the photo depicting the game of pool into the body element and position it in the upper left corner. Then use the image replacement technique discussed in Recipe 3-10 to place the photo of Earth for h2:

<style type="text/css">

body {

CSS : Designing with CSS - [10.3] Combining Unlike Elements to Create Contrast

Problem

You want to create contrast on a web page by integrating two different elements, like serif and sans-serif typefaces as shown in Figure 10-4.

Figure 10-4. Type elements juxtaposed in the same headline

Solution

Use different typefaces in the same headline. First adjust the markup to allow for changes in the font properties:

<h2>Cross<span>i</span>ng <span>Over</span></h2>

<h4>Sen. Jane Gordon (<span>I</span>-Utah) bolts GOP; <br />changes part<span>i</

span>es to be <span>I</span>ndependent</h4>

Then manipulate the CSS for the span element to create a mixture of typefaces:

body {

 margin: 25% 10% 0 10%;

}

h2 {

 font-size: 2em;

 font-weight: bold;

 font-family: Arial, Verdana, Helvetica, sans-serif;

 text-transform: uppercase;

 text-align: center;

 padding: 0;

 margin: 0;

}

h2 span {

 font-family: Times, "Times New Roman", Georgia, serif;

 font-size: 1.1em;

 font-weight: normal;

 }

CSS : Designing with CSS - [10.4] Leading the Eye with Contrast

Problem

You want to create a sense of depth or motion through text. On a page containing four paragraphs that are almost identical, it's hard to know which paragraph to look at first (see Figure 10-5). If you change font size across columns in a particular direction (e.g., decrease the size left-to-right) you lead the reader's eye (see Figure 10-6).

Figure 10-5. Four paragraphs that are almost identical

Figure 10-6. Changing the type size so that the reader's eye will scan from left to right

Solution

To lead the reader's eye, change the type size by adding a CSS rule like this:

/* Text size */

#layer4  {

 font-size: .7em;

 line-height: 20px;

}

#layer3  {

 font-size: 1em;

 line-height: 20px;

}

#layer2  {

 font-size: 2em;

 line-height: 10px;

}

#layer1  {

 font-size: 3em;

 line-height: 10px;

}

Discussion

CSS : Designing with CSS - [10.5] Building a Panoramic Image Presentation

Problem

You want the width of an image to increase or decrease as a user resizes his browser window, as shown in Figure 10-9.

Figure 10-9. Browser window increased in size to show more of the panoramic image

Solution

Place an image element that refers to a panoramic image into the background of a block-level element (see Figure 10-10):

Figure 10-10. Panoramic photo placed on a web page

<h1>Visit France City!</h1>

<div><img src="frenchtown.jpg" alt=" " /></div>

CSS : Designing with CSS - [10.6] Combining Different Image Formats

Problem

You want to combine two different image formats into one presentation. For example, you want to combine GIF and JPEG images into one graphical presentation as shown in Figure 10-11.

Figure 10-11. Two different image formats combined into one

Solution

Place an image inside a block-level element such as a div or h2:

<h2><img src="headline_text.gif" alt="Headline image set in 

GIF format" /></h2>

Using an image-editing program, separate the elements of the image into separate file formats (see Figure 10-12).

Figure 10-12. Two images that will be used to create one image

Name one of the images the same as the image referred to in the src attribute for the img element. Place the other image in the background of the block-level element to merge both images into one presentation.

h2 {

 background-image: url(headline_bkgd.jpg);

 background-repeat: none;

 width: 587px;

 height: 113px;

}

Discussion

The two prevailing image formats on the Web are GIF and JPEG. Both compress images in different ways. Typically, images with flat areas of color compress better in the GIF format, while JPEG images are better for photos or images that contain fine color gradations.

In the example shown in Figures Figure 10-1 and Figure 10-2, the file size of the two separate images added together is actually less than the file size of the final, combined image. This occurs because part of the image would work against the compression scheme of one file format. If you saved the presentation as one GIF, the photographic portions of the image would create an inflated file size. And if you saved the image as a JPEG, the areas of flat color would inflate the size. By splitting up the images into different formats that leverage their respective compression schemes, you reduce file sizes overall.

CSS : Designing with CSS - [10.7] Making Word Balloons

Problem

You want to create a word-balloon effect as shown in Figure 10-16.

Figure 10-16. The word balloon

Solution

Mark up the content for a word balloon, and include both the text to appear in the word balloon as well as the name of the person cited as the source (see Figure 10-17):

<blockquote>

 <p>

  <span>

   Be bold, baby!

  </span>

 </p>

 <cite>

  Christopher Schmitt

 </cite>

</blockquote>

Figure 10-17. Structured content for a word balloon

Form the word balloon using the CSS border and background properties. Then align the cited text so that it falls underneath the balloon tail image:

blockquote {

 width: 250px;

}

blockquote p {

 background: url(balloontip.gif);

 background-repeat: no-repeat;

 background-position: bottom;

 padding-bottom: 28px;

}

blockquote p span {

 display: block;

 padding:  0.25em 0.25em 0.5em 0.5em;

 border: 1pt solid black;

 border-bottom-width: 0;        

 font-size: 3em;

 font-family: "Comic Sans MS", Verdana, Helvetica, sans-serif;

 line-height: 0.9em;

}

cite {

 text-align: right;

 display: block;

 width: 250px;

}

CSS : Designing with CSS - [10.8] Emphasizing a Quotation

Problem

You want to add emphasis to a quotation by large and bold quotation marks as shown in Figure 10-20.

Figure 10-20. The stylized quotation

Solution

First code the markup for the quotation (see Figure 10-21):

<blockquote>

 <p>There is a tendency for things to right themselves.</p>

 <cite>Ralph Waldo Emerson</cite>

</blockquote>

Figure 10-21. Quotation as it would normally appear

Then apply CSS rules to stylize the quote:

blockquote {

 padding: 0;

 margin: 0;

 text-align: center;

}

p {

 font-size: 1em;

 padding-bottom: 3em;

 text-transform: lowercase;

 font-family: Georgia, Times, "Times New Roman", serif;

 margin: 0;

 padding: 0;

} 

cite {

 display: block;

 text-align: center;

}

Finally, use pseudo-elements :before and :after to stylize the punctuation in the quotation as well as to place an em dash—a horizontal dash equal to the default size of the font—before the name of the cited source:

blockquote p:before {

 content: "\201C"; 

 font-size: 1.2em;

 font-weight: bold;

 font-family: Georgia, Times, "Times New Roman", serif;

}

CSS : Designing with CSS - [10.9] Placing a Drop Shadow Behind an Image

Problem

You want to place a drop shadow behind an image as shown in Figure 10-22.

Figure 10-22. A drop shadow is placed behind the image

Solution

Place the image element (as shown in Figure 10-23) inside a div element with the class attribute set to imgholder:

<div class="imgholder"> 

 <img src="dadsaranick2.jpg" alt="Photo of Dad, Sara, Nick" /> 

 </div>

Figure 10-23. The image placed above the content

To the div element, set the image alignment to the left so that text wraps around the image. Next set the background image of the drop shadow in two background properties. In the first background property use an image with an alpha transparency like PNG:

div.imgholder {

 float:left; 

 background: url(dropshadow.png) no-repeat bottom 

  right !important; 

 background: url(dropshadow.gif) no-repeat bottom right; 

 margin: 10px 7px 0 10px !important; 

 margin: 10px 0 0 5px; 

}