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. Solution First, code the markup for the quotation (see Figure 13-8): <blockquote> <p>There is a tendency for things to right themselves.</p> <cite>Ralph Waldo Emerson</cite> </blockquote> Figure 13-8. 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; } Figure 13-7. A stylized quotation 580 | Chapter 13: Designing with CSS 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: <body> <div id="birds2"> <div id="birds1"> <div id="filler"> [ ] </div> </div> </div> </body> 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: <body> <div id="clouds1"></div> [ ] </body> 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. [...]... the CSS rules (see Recipe 2.15) from the framework: You should make any additional CSS rules for customizing the page layout in a separate... 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: > #content { color:... media="screen, projection"> 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... float: left; text-indent: −9999em; background-repeat: no-repeat; } With the main building blocks of the navigation set up, create a CSS sprite image for the navigation menu that includes normal, rollover, and on states, as shown in Figure 13-14 Figure 13-14 Navigation CSS sprite image Then, set up each link with its own: #nav-site ul li#linkservices a { width: 118px; height: 39px; background-image: . href=" ;css/ blueprint/screen .css& quot; type="text /css& quot; media="screen, projection"> <link rel="stylesheet" href=" ;css/ blueprint/print .css& quot;. the CSS rules (see Recipe 2.15) from the framework: <link rel="stylesheet" href=" ;css/ blueprint/screen .css& quot; type="text /css& quot; media="screen,