Nội dung Text: CSS Cookbook- P13

Solution
Use different typefaces in the same headline. First adjust the markup to allow for
changes in the font properties:
Crossing Over
Sen. Jane Gordon (I-Utah) bolts GOP;
changes parties to be
Independent
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.

Figure 13-6. The results of the luminosity test
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.
13.6 Emphasizing a Quotation with Smart Quotes | 579
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Finally, use the :before and :after pseudo-elements 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;
}
blockquote p:after {
content: "\201D";
font-size: 1.2em;
font-weight: bold;
font-family: Georgia, Times, "Times New Roman", serif;
}
cite:before {
content: "\2014 ";
}
cite {
display: block;
text-align: center;
}
Discussion
Pseudo-elements are selector constructs that browsers use first to select portions and
then to stylize a web page that can’t be marked up through standard HTML. For in-
stance, you can use pseudo-elements to stylize the first line of a paragraph or, in the
case of this recipe, to place generated content before and after an actual element.
In this Solution, you inserted smart quotes around the actual quotation. For the left
double quotes, you used this declaration:
content: "\201C ";
Any text that you want displayed after an element needs to be marked off with double
quotes. Because you are using double quotes to mark what should be displayed, you
can’t put another set of double quotes inside the first set. To put quotes around the
quotation, you need to use the hexadecimal value for a quotation mark, which is 201C.
Because anything between the quotation marks automatically is generated as is, you
need to escape the hexadecimal number that tells the browser to render the quotation
marks by placing a forward slash in front of the double quotes.
The content property in the CSS 2.1 specification contains values for easily inserting
quotation marks. For example, to re-create the left double quotes, use the following
declaration:
content: open-quote;
13.6 Emphasizing a Quotation with Smart Quotes | 581
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

However, note that open-quote keyword value specification is implemented only in
Mozilla and Opera. Also, note that the :before and :after pseudo-elements don’t work
in Internet Explorer 5 and later for Windows and Internet Explorer for Macintosh.
See Also
The CSS2 specification for quotations for generated content at http://www.w3.org/TR/
REC-CSS2/generate.html#quotes
13.7 Setting a Moving Background Scene When a User Resizes
the Window
Problem
You want to have overlaying background images move as a user resizes the browser
window, as shown in Figure 13-9.
Figure 13-9. Images moving location based on the resizing of the browser window
582 | Chapter 13: Designing with CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Solution
Set a background image in the body element, with a negative percentage value:
body {
font-size: 62.5%;
background-color: #fff;
background-image: url(birds-flock.png);
background-repeat: repeat-x;
background-position: −80% 0;
}
Then wrap the content on the web page with two additional div elements:
[...]
Set background images within the respective div elements with different background
position values:
#birds2 {
background-image: url(birds-two.png);
background-position: 90% 0;
background-color: transparent;
background-repeat: no-repeat;
width: 100%;
}
#birds1 {
background-image: url(birds-one.png);
background-position: −20% 0;
background-color: transparent;
background-repeat: no-repeat;
width: 100%;
}
Discussion
By utilizing percentage-based lengths set to different values, you give the user a sense
that he is looking at one object with more than one viewpoint as the backgrounds move
in different directions. This effect is termed parallax, which is based on the Greek word
parallaxis, meaning “alteration.”
For this effect to work, the background images require alpha-transparent PNG images.
The subtle opacity changes as the background images move across each other, helping
to sell the visual effect.
Using JavaScript, you can trigger the effect by moving your mouse. For more informa-
tion and to download the code, see http://webdev.stephband.info/parallax.html.
13.7 Setting a Moving Background Scene When a User Resizes the Window | 583
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

See Also
A more detailed description of the effect at http://carsonified.com/blog/design/how-to
-recreate-silverbacks-parallax-effect/
13.8 Adding Animation to Elements on a Page
Problem
You want to animate an element within a web page, as shown with the cloud image in
Figure 13-10.
Figure 13-10. Clouds moving in the background
Solution
Using Safari’s proprietary animation properties, set an element to move back and forth.
First add an HTML element after the opening body element:
[...]
Insert a background image along with width, height, and absolute positioning to style
the element:
#clouds1 {
width: 627px;
height: 410px;
position: absolute;
right: −300px;
584 | Chapter 13: Designing with CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

top: 0;
background-image: url(clouds.png);
}
Next, set the keyframes for the animation, giving them the names of clouds:
@-webkit-keyframes "clouds" {
from {
right: 0px;
}
to {
right: 100px;
}
}
Start the animation by associating the keyframes to the “clouds1” div element along
with instructions on how long the animation should last, how often it repeats, and the
direction of the movement:
#clouds1 {
width: 627px;
height: 410px;
position: absolute;
right: −300px;
top: 0;
background-image: url(clouds.png);
-webkit-transform: translate(300px, 0px);
-webkit-animation-name: "clouds";
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}
Discussion
Although CSS-enabled animation is supported only in Safari as of this writing, the W3C
is currently working on the specification. Other browser vendors may opt to develop
similar proprietary extensions of their browsers until the animation specification is
finalized.
Animation keyframes
The first step when setting animations is to define what’s called a keyframes rule:
@-webkit-keyframes "clouds" {
from {
right: 0px;
}
to {
right: 100px;
}
}
The keyframes set the starting and ending points of an animation, but also allow for
more refined control of how the animation is displayed. Instead of using the from and
13.8 Adding Animation to Elements on a Page | 585
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

When an animation reaches the end of the keyframe, but is set to repeat another cycle,
you can set the animation to go into reverse by setting the animation-direction property
to alternate:
#clouds1 {
width: 627px;
height: 410px;
position: absolute;
right: −300px;
top: 0;
background-image: url(clouds.png);
-webkit-transform: translate(300px, 0px);
-webkit-animation-name: "clouds";
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}
The default value for animation-direction is normal, which means the animation loops.
Once an element has reached the final point, it disappears and reappears at the starting
point to begin again.
See Also
The CSS3 specification for animations at http://www.w3.org/TR/css3-animations/
13.9 Creating a Fireworks Display As a User Scrolls
Problem
You want to display fireworks in the background of a page with changing colors as a
user scrolls the browser window, as shown in Figure 13-11.
Figure 13-11. The fireworks changing color as the web page is scrolled
588 | Chapter 13: Designing with CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Solution
First, set a rainbow-colored background image in the body element, making sure to also
set the background-attachment property to fixed:
body {
font-size: 62.5%;
background-color: #fff;
background-image: url(bkgd.jpg);
background-position: center;
background-color: white;
background-attachment: fixed;
}
Next, wrap the content on the web page with a div element:
[...]
Then place an image consisting of reversed silhouette images of fireworks:
#easel {
background-image: url(fireworks.png);
width: 100%;
height: 100%;
}
Discussion
As in Recipe 13.7, this Solution relies on layering images on top of each other. By
constraining the colorful background image through an elaborate keyhole, you make
the rainbow colors appear to compose the fireworks.
As a user scrolls the browser, the rainbow background graphic stays in place, but the
fireworks image is tiled and appears to scroll. This user behavior completes the effect
of a simple rainbow animation.
In addition to scrolling animation, if the user resizes the browser window, the colors
of the fireworks also change. This effect is due to centering the rainbow image in the
body element. As the browser resizes, the browser repositions the background image to
be centered.
See Also
Recipe 13.7 for setting a moving background scene when a user resizes the window
13.9 Creating a Fireworks Display As a User Scrolls | 589
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

13.10 Customizing the View Source Stylesheet for Firefox
Problem
You want to modify the design of the code that appears when viewing the source of
web pages in Firefox.
Solution
If you’re using a Macintosh, you can follow these steps:
1. Find the Firefox application file, Firefox.app, in the Applications folder.
2. Ctrl-click the application to pull up a dialog box and select Show Package Contents.
3. Go to Folder Contents→MacOS→res and open the viewsource.css file. Once
opened, edit the file to your liking.
If you’re a Windows user, you can locate the stylesheet at this directory:
C:\Program Files\Mozilla Firefox\res\viewsource.css.
Discussion
To use your own images, make sure the image is placed in the same folder as the
viewsource.css file.
Setting an external editor
Instead of customizing the look of the view-source output with CSS, you can use an
external, third-party application in place of Firefox.
Type about:config in the location box in the browser. Then search for
view_source.editor.external. Ctrl-click or right-click the option to change false to true.
Then Ctrl-click or right-click view_source.editor.path and set the value to the path of
the code editor.
For PC versions of Firefox using the Notepad++ application:
view_source.editor.path: C:\Program Files\Notepad++\notepad++.exe
For Mac versions of Firefox using the TextMate application:
view_source.editor.path: /Applications/TextEdit.app/Contents/MacOS/TextMate
See Also
Recipe 2.1 for information on how authors can create their own stylesheets
590 | Chapter 13: Designing with CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

13.11 Designing with Grids (CSS Frameworks)
Problem
You want to design a web page using a premade grid system with CSS.
Solution
Before building with HTML or CSS code, first design with a Blueprint Illustrator or
Photoshop template by downloading the file(s) at http://urlgreyhot.com/personal/we
blog/photoshop_and_illustrator_templates_blueprint_css_framework.
Then, using the templates as a basis, design the mockup of the site.
The default column system for Blueprint CSS is 24 columns that are 30
pixels wide with a 10-pixel margin or gutter.
Download the Blueprint CSS files from http://www.blueprintcss.org and include those
files in your website development files. Then associate the CSS files in the head element:
You should make any additional CSS rules for customizing the page layout in a separate
stylesheet, and associate them through a link element so as to override the CSS rules
(see Recipe 2.15) from the framework:
Within the body element, wrap the content with a div element that has an id attribute
with a value of container:
...
13.11 Designing with Grids (CSS Frameworks) | 591
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

To create columns, use the class attribute along with a value of span and append the
number of columns that content should cross:
Header
Side column
Main column
Side column
Since the margins or gutters are applied to the right side of the columns, the last column
needs to be stripped of the margin value; otherwise, the width of the page expands past
the 960-pixel width.
You can remove this right-side margin through a class selector, which you can apply
with other class attribute values:
Header
Side column
Main column
Side column
To nest multiple columns within another column, use the same technique:
Header
Side column
Sidebar
Main column
592 | Chapter 13: Designing with CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Footer for main column
Side column
Discussion
Grid layouts have been used in print design for centuries and are often thought of as
an earmark of good design.
Using prepared files for frameworks is a quick way to build cross-browser layouts with
a grid layout. Typically, CSS frameworks include CSS Reset (see Recipe 5.2), a simple
print stylesheet (see Chapter 11), basic type formatting (see Chapter 3), and, most
importantly, a method for easily creating a column structure.
Detractors to frameworks cite their bloated source code, inflexible grid structure, and
slower downtimes with an increased number of HTTP requests to download files as
reasons to not use systems such as Blueprint.
To change the width, number of columns, or size of the gutters within
Blueprint CSS, use the online application at http://kematzy.com/blue
print-generator/.
See Also
Blueprint CSS tutorials at http://wiki.github.com/joshuaclayton/blueprint-css/tutorials
13.12 Sample Design: A Cohesive Web Design
For this sample design, you will convert a web page design into an HTML and CSS
design by using several of the solutions discussed in this book.
Setting the Page
The first step is to mark up the document with div elements:
Kirkland Composition &amp;
Copyediting
13.12 Sample Design: A Cohesive Web Design | 593
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.