Tài liệu CSS Cookbook- P13 ppt

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;

}

h4 {

margin: 0;

padding: 0;

font-size: 1.25em;

font-weight: bold;

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

text-transform: uppercase;

text-align: center;

}

h4 span {

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

font-size: 1.1em;

font-weight: normal;

}

Discussion

Combining unlike elements creates a visual contrast. In this example, different char￾acteristics of the serif and sans serif typefaces in the headline created the contrast.

However, you can create contrast through imagery as well. For instance, in this exam￾ple, you could have integrated Democratic and Republican political party symbols and

placed them side by side. Or you could have gone for a more symbolic contrast by

placing photos of two different types of parties side by side: one depicting a large social

13.3 Combining Unlike Elements to Create Contrast | 575

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

gathering at a club and the other showing a girl blowing a noisemaker over a cupcake

with a lit candle on top.

See Also

Recipe 4.22 for combining different image formats

13.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.

If you change the font size across columns in a particular direction (e.g., decrease the

size right to left) you lead the reader’s eye (see Figure 13-5).

Figure 13-5. Four paragraphs that are almost identical, then changed with increasing contrast

576 | Chapter 13: Designing with CSS

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Solution

To lead the reader’s eye, change the type size by adding a CSS rule such as 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

Contrast occurs when there is an obvious difference between two elements. If there

isn’t any contrast on a page, the reader doesn’t know what is important on the page.

By manipulating an element’s visual value, you can create contrast between two like

elements. Some of those visual values include the following:

• Size

• Color

• Shape

• Position on a page

• Direction

• Density

Properly marked content has an inherent style because the browser uses its own style￾sheet to render the content when another stylesheet isn’t present. Headings, such as

the h1 element, are stylized in a large, bold font and are separated from the paragraphs.

This different font provides the contrast to help readers make sense of the document.

Without the cues that can be provided through a stylesheet, the reader’s eye wanders

throughout a document.

See Also

Lighthouse International’s website, http://www.lighthouse.org/color_contrast.htm, for

creating more effective contrast

13.4 Leading the Eye with Contrast | 577

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

13.5 Checking for Enough Color Contrast

Problem

You want to make sure there is enough contrast between two colors.

Solution

Use the Luminosity Colour Contrast Analyser from JuicyStudio.com at http://juicystu

dio.com/services/luminositycontrastratio.php.

Enter two color values into the validator and click the Calculate Luminosity Contrast

Ratio button.

Along with a color sample of the two colors, you receive a summary noting whether

you pass luminosity contrast level 2, level 3, or not at all. The example in Figure 13-6

shows that the color combination has passed both levels 2 and 3.

Discussion

The W3C’s Web Content Accessibility Guidelines state that to make text legible, de￾signers need to ensure that the content in the foreground can be perceived against the

background.

When the color for text is close to the same hue as the background color, the text

becomes illegible. For the text to be legible, the colors need to have greater contrast by

being farther apart from each other in the spectrum, or the text needs to be significantly

darker or lighter than the background.

Levels of luminosity

For colors to pass the second level of luminosity, the luminosity contrast ratio needs

to be at least 5:1. That means one color needs to be at least five times as dark or as light

as the other color.

For colors to pass the third level, the luminosity contrast ratio must be at least 10:1.

See Also

JuicyStudio.com’s explanation of the Suggested Luminosity Contrast Ratio Algorithm

at http://juicystudio.com/article/luminositycontrastratioalgorithm.php

578 | Chapter 13: Designing with CSS

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

13.6 Emphasizing a Quotation with Smart Quotes

Problem

You want to add emphasis to a quotation by using large and bold quotation marks, as

shown in Figure 13-7.

Figure 13-6. The results of the luminosity test

13.6 Emphasizing a Quotation with Smart Quotes | 579

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.