CSS Cookbook- P7

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
61
lượt xem
9
download

CSS Cookbook- P7

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'css cookbook- p7', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: CSS Cookbook- P7

  1. So, to ensure cross-browser support within IE versions, make sure you include both sets of properties: .highlight { scrollbar-face-color: #99ccff; scrollbar-shadow-color: #ccccff; scrollbar-highlight-color: #ccccff; scrollbar-3dlight-color: #99ccff; scrollbar-darkshadow-color: #ccccff; scrollbar-track-color: #ccccff; scrollbar-arrow-color: #000033; -ms-scrollbar-face-color: #99ccff; -ms-scrollbar-shadow-color: #ccccff; -ms-scrollbar-highlight-color: #ccccff; -ms-scrollbar-3dlight-color: #99ccff; -ms-scrollbar-darkshadow-color: #ccccff; -ms-scrollbar-track-color: #ccccff; -ms-scrollbar-arrow-color: #000033; } Use conditional comments (see Recipe 12.7) to pinpoint CSS rules to a specific version of IE. The Safari browser also has proprietary CSS rules for colorizing a scroll bar. For more information, see http://webkit.org/blog/363/styling-scroll bars/. See Also Internet Explorer-specific Functionality at http://msdn.microsoft.com/en-us/library/ cc304082(VS.85,loband).aspx#ie_specific; the “IE Colour scrollbar maker” at http:// www.sean.co.uk/a/webdesign/color_scrollbar_maker_ie.shtm 5.4 Techniques for Centering Elements on a Web Page Problem You want to center parts of a web page, as in Figure 5-8. Solution To center text in a block-level element, use the text-align property: h1, h2, h3 { text-align: center; } 5.4 Techniques for Centering Elements on a Web Page | 275 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  2. Figure 5-8. The headline text centered Discussion By using text-align, you can center text inside block-level elements. However, in this example, the heading takes up the entire width of the body element, and if you don’t apply a background color to the element, you probably won’t even notice this is hap- pening. The gray background color in Figure 5-9 shows the actual width of the centered elements. Figure 5-9. The actual width of the elements shown by the gray background color 276 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  3. An alternative approach is to use margins to center text within its container: h1, h2, h3 { margin-left: auto; margin-right: auto; width: 300px; } When you set the margin-left and margin-right properties to auto (along with a value for the width property), you center the element inside its parent element. Tables To center a table, set a class attribute with a value: This is the first cell This is the second cell This is the third cell, it's under the first cell This is the fourth cell, it's under the second cell. Then write the following CSS rule: .center { width: 50%; margin-left: auto; margin-right: auto; } Images If you want to center an image, wrap a div element around the img element first. This technique is required because an img element, like em and strong, is inline. It rests in the flow of the web page instead of marking off space like the p or blockquote block- level elements do. The markup looks like this: And the CSS rule looks like this: .flagicon { text-align: center; } To center elements with fixed widths, such as images, first set the value of the parent’s padding-left property to 50%. 5.4 Techniques for Centering Elements on a Web Page | 277 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  4. Then determine half of the width of the element you are centering and set it as a negative value in the margin-left property. That prevents the element’s left side from resting on the 50% line caused by its padding and makes it slide into the middle of the page. The markup for an image in a web page using this technique looks something like this: The CSS rule to produce the result shown in Figure 5-10 looks like this: body { padding-left: 50%; } img { /* equal to the negative of half its width */ margin-left: −138px; } Figure 5-10. The image centered without the deprecated center element Vertical centering With the element centered horizontally, you can take this technique one step further and center the image (or any other element) vertically as well. The difference with this method is that it uses the position property to make this work. The markup is the same as that used for the image element in the previous example, but this time the CSS rule is for just one selector (see Figure 5-11): img { position: absolute; top: 50%; left: 50%; margin-top: −96px; margin-left: −138px; height: 192px; width: 256px; } 278 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  5. Figure 5-11. The image centered horizontally and vertically on the web page With absolute positioning (see Recipe 2.23), you take the element out of the normal flow of the document and place it wherever you want. If you want to center both text and an image (or other images) instead of just one image, enclose all of the content with a div element: Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Then in the CSS rule, remove the height property and adjust the negative value of the top margin to compensate for the additional elements on the page: #centerFrame { position: absolute; top: 50%; left: 50%; /* adjust negative value until content is centered */ margin-top: −150px; margin-left: −138px; width: 256px; } Keep the amount of content that you want centered short. This Solution is going to only roughly center the text and the images because the text will render at different heights on different computers. 5.4 Techniques for Centering Elements on a Web Page | 279 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  6. If you have numerous images and large amounts of HTML text, users with low reso- lutions will have to scroll the page to see your centered content. See Also Chapter 10 for information on multicolumn layouts, which deal with the position of elements in a web page 5.5 Placing a Page Border Problem You want to place a visual frame or border around a web page, as shown in Figure 5-12. Figure 5-12. A framed web page Solution Use the border property on the body element: body { margin: 0; padding: 1.5em; border: 50px #666 ridge; } 280 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  7. Discussion The border property is a shorthand property, in that it enables you to set the width, color, and style of the border around an element in one step instead of three. If you didn’t use this shorthand property in the preceding Solution, you would have to replace the line that reads border: 50px #666 ridge; with the following three lines: border-width: 50px; border-color: #666; border-style: ridge; You can create a framing effect with other styles as well, such as dotted, dashed, solid, double, groove, inset, and outset (see Figure 5-13). Figure 5-13. The available border styles in CSS Note that the groove style is the inverse of the shades of shadow as seen in the Solution, which uses the ridge value. 5.5 Placing a Page Border | 281 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  8. The only browser incompatibilities to worry about are that in Internet Explorer for Windows the dotted style appears as aliased circles, whereas in Firefox, Opera, and Safari the dotted style appears as blocks. Borders on images You also can place a stylized border on images (see Recipe 4.2). Instead of having a default solid line, try experimenting in your designs with grooved or double borders, as shown in Figure 5-14: img.left { float: left; margin-right: 7px; margin-bottom: 3px; border: 4px double #666; } Figure 5-14. A double border around an image See Also Recipe 3.21 for creating pull quotes with different border styles 282 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. 5.6 Placing a Border Around the Browser’s Viewport Problem You want to place a border around the viewport of the browser. Solution First set up a series of eight div elements that are placed beneath the content of the web page, but right before the closing body element: Set the corners of the frame to have the same width and height and set the position to fixed: #topleft, #topright, #bottomleft, #bottomright { height: 24px; width: 24px; position: fixed; display: block; z-index: 20; } Set the borders to a fixed position. Also, set the top and bottom sides to a height of 24 pixels and the left and right sides to a width of 24 pixels: #top, #bottom { height: 24px; position: fixed; left: 0; right: 0; display: block; background-color: #ccff00; z-index: 30 } #left, #right { width: 24px; position: fixed; top: 0; bottom: 0; display: block; background-color: #ccff00; z-index: 50; } 5.6 Placing a Border Around the Browser’s Viewport | 283 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  10. Then assign each part to its respective corner and side of the viewport: #top { top: 0; } #bottom { bottom: 0; } #left { left: 0; } #right { right: 0; } #topleft { top: 0; left: 0; } #topright { top: 0; right: 0; } #bottomleft { bottom: 0; left: 0; } #bottomright { bottom: 0; right: 0; } Discussion A character of this recipe’s approach is that the border expands to the height of the content within the body element. To have a border or framing device that is visible around the entire viewport at all times, no matter the length of content, use fixed positioning (see Recipe 4.10). Instead of using background colors for the bars, another technique similar to this one is to use PNGs (or even CSS gradients with opacity as in Recipe 4.16) to set a fade effect. As the user scrolls the browser, the text fades out along the edges of the browser’s viewport. See Also The CSS2 specification for fixed positioning at http://www.w3.org/TR/CSS2/visuren .html#fixed-positioning 284 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  11. 5.7 Customizing a Horizontal Rule Problem You want to change the look of a horizontal rule from the solid line in Figure 5-15 to something more interesting, such as the graphic in Figure 5-16. Figure 5-15. The default rendering of a horizontal rule Solution Use a mixture of CSS properties on the hr element to obtain the desired effect: hr { border: 0; height: 43px; background-image: url(hr.gif); background-position: 50% 0; background-repeat: no-repeat; margin: .66em 0; } 5.7 Customizing a Horizontal Rule | 285 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  12. To create a cross-browser styling of horizontal rules, set the border to zero and then bring in an image through the background property. Adjust the margins above and below to taste. For cross-browser support for older IE browsers, use conditional comments to deliver an alternative method of bringing in the background image: Since older versions of IE cannot insert a background image through the hr element, set the display property to list-item. This allows an image to be brought in through the list-style property. To remove the border of the hr element set the opacity to zero using Microsoft’s CSS filter. See Also The HTML 4.01 specification for hr elements at http://www.w3.org/TR/html401/ present/graphics.html#edef-HR; an overview of styling an hr element at http://www.so vavsiti.cz/css/hr.html 5.8 Adding a Lightbox Problem You want to overlay images on top of a current web page (as shown in Figure 5-17) without popping a new browser window. Solution Download the source code for the lightbox effect from http://www.huddletogether.com/ projects/lightbox2/#download. Along with the Prototype JavaScript Framework Scriptaculous Effects JavaScript libraries, include specialized JavaScript for overlaying images: Mr. McCool's Homepage 5.8 Adding a Lightbox | 287 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  13. Figure 5-17. The default page Next, link to the stylesheet that renders the look and feel of the overlay effect: Mr. McCool's Homepage Within the web page content, include a link to an image, making sure to include a rel attribute with a value of lightbox. A common link example would be to wrap a link around a thumbnail image: Clicking on link activates the lightbox effect, as shown in Figure 5-18. 288 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  14. Figure 5-18. The lightbox appearing on top of the page Discussion The lightbox effect is built on two core pieces: the Prototype JavaScript Framework and Scriptaculous. Prototype creates a more object-oriented framework, allowing developers to quickly build web-based applications based on JavaScript. For more information about Proto- type, see its official website, http://www.prototypejs.org/. Scriptaculous is a collection of JavaScript libraries. When used in conjunction with Prototype, Scriptaculous allows developers to build dynamic, Asynchronous JavaScript and XML (Ajax) interactions. For more information on Scriptaculous, see http://script .aculo.us/. With the JavaScript foundations in place, web developer Lokesh Dhakar (see http:// www.lokeshdhakar.com/projects/lightbox2/) developed a clever image viewer that dis- plays a full-size image without having to leave the web page that displays the thumbnails. 5.8 Adding a Lightbox | 289 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  15. Other JavaScript libraries and gallery plug-ins are also available. For example, check out jQuery (see Chapter 14) and the galleria image gal- lery (see http://code.google.com/p/galleria/). Setting up the files When you download and link the JavaScript files and stylesheet to a web page, make sure the files are properly linked. For example, if you place the JavaScript and stylesheet in separate folder locations, make sure the code reflects their locations: In the lightbox JavaScript file, also make sure the locations of the images are correct. If you need to edit the locations of the images, look toward the top of the JavaScript file for the following lines to modify: var fileLoadingImage = "/_assets/img/loading.gif"; var fileBottomNavCloseImage = "/_assets/img/closelabel.gif"; The stylesheet for the lightbox utilizes the background image property three times. Make sure those images referenced in the properties are also set to the correct locations: #prevLink, #nextLink { width: 49%; height: 100%; /* Trick IE into showing hover */ background: transparent url(/_assets/img/blank.gif) no-repeat; display: block; } #prevLink:hover, #prevLink:visited:hover { background: url(/_assets/img/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/_assets/img/nextlabel.gif) right 15% no-repeat; } Making a slideshow In addition to showcasing one image at a time, you can set up the lightbox to display a slideshow, as shown in Figure 5-19. To achieve this effect, modify the value of the rel element by using right-angle brackets after lightbox and inserting a gallery name. In the code example, I used the gallery name austin because I took the pictures in Austin, Texas:
  16. alt="Mark Trammel is happy with his shoes." /> Figure 5-19. The lightbox displaying a slideshow of images The gallery name needs to be the same for related images to be put into the same slideshow presentation. Known browser issues Since the lightbox effect is built on the Prototype Framework, the lightbox effect’s support in browsers is based on how many browsers Prototype supports. As of this writing, the following browsers support Prototype: • Microsoft Internet Explorer for Windows 6 and later • Firefox 1.0 and later 5.8 Adding a Lightbox | 291 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  17. • Safari 1.2 and later • Opera 9.25 and later • Chrome The lightbox effect degrades gracefully. If a visitor’s browser does not support the lightbox effect, the browser will follow the value of the href attribute: In this example, the browser pulls up the file trammell_shoes.jpg. See Also The article “Learn 3 Excellent JavaScript Libraries at Once” at http://net.tutsplus.com/ tutorials/javascript-ajax/learn-3-excellent-javascript-libraries-at-once/ 5.9 Changing the Opacity on Elements Problem You want to change the opacity or transparency of an element. Solution There is an opacity property within CSS that’s fairly straightforward to implement (as shown in Figure 5-20): #number4 { opacity: .4; /* .4 = 40% transparency */ filter: alpha(opacity=40); /* 40 = 40% transparency */ } Discussion The value of .4 for the opacity property means the element is 40% opaque. A value of 0 means the element is invisible, whereas a value of 1 means there is no transparency. The proprietary property for Internet Explorer, filter, needs to be set with a value that’s equal to the percentage of the transparency. The value of opacity for an alpha filter ranges between 0 and 100. A value of 0 means the element is invisible and a value of 100 means there is no transparency. Opacity changes everything contained in the block-level element, whereas setting the opacity with RGBA (see Recipe 5.10) changes the opacity of the element itself. 292 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  18. Figure 5-20. Implementing transparency on the number 4 and the box Browser support The opacity filter is currently supported in Firefox 1.5 and later, Opera 9 and later, Safari 1.2 and later, and Chrome. Internet Explorer for Windows 5.5 and later requires the use of its own alpha filter for the effect to be cross-browser compatible. Since the filter property is proprietary, the CSS rule is invalid and the stylesheet it rests in will not validate. A “workaround” is to move IE-specific style rules and apply those rules to only Internet Explorer with conditional comments. A drawback to using the opacity filter is that the value is inherited. If a parent element is set to be 10% transparent, the child elements’ trans- parency is also going to be 10%. Watch out for legibility issues within the web page. 5.9 Changing the Opacity on Elements | 293 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  19. See Also The CSS3 specification for the opacity property at http://www.w3.org/TR/css3-color/ #transparency; Recipe 5.10 for setting the opacity of an element’s background color; Recipe 4.14 for setting the browser to render images 5.10 Adjusting the Opacity of Background Colors Problem You want to set the opacity of an element’s background color. Solution Set the transparency of an element’s background color using the RGBA value, as shown in Figure 5-21: #number4 { background-color: rgba(255, 255, 0, .4); } Figure 5-21. A transparent background color 294 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản