CSS Cookbook- P5

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

0
38
lượt xem
8
download

CSS Cookbook- P5

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- p5', 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- P5

  1. Discussion The Solution works by snapping the text within the sup and sub elements to the baseline just like the rest of the text. Then you can position the text off of the baseline through the use of relative positioning (see Recipe 2.24) to re-create the desired appearance of superscript and subscript. See Also http://paularmstrongdesigns.com/weblog/stop-superscripts-from-breaking-line-heights -once-and-for-all for web designer Paul Armstrong’s blog post about this technique 3.36 Setting Up Multiple Columns of Text Problem You want to set a long passage of text into multiple columns, as shown in Figure 3-51. Figure 3-51. Words in the heading spaced farther apart 3.36 Setting Up Multiple Columns of Text | 175 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  2. Solution Wrap a div element around the content passage to set it in columns: ... ... ... ... ... Use proprietary column-gap and column-width tags: #column { -moz-column-gap: 3em; -moz-column-width: 11em; -webkit-column-gap: 3em; -webkit-column-width: 11em; padding: 10px; } Then set line rules using the proprietary -column-rule properties: #column { -moz-column-gap: 3em; -moz-column-width: 11em; -moz-column-rule: 1px solid #ccc; -webkit-column-gap: 3em; -webkit-column-width: 11em; -webkit-column-rule: 1px solid #ccc; padding: 10px; } Discussion The use of the column properties saves web designers time as setting columns of text is a laborious process. To achieve the column effect for a design, web designers would need to count the number of words for each column to make sure each column had an equal number of words; set each equal number of words with their own div element; and individually position or float those div elements into place. Known issues The CSS3 column properties make the process of setting columns easy and automatic for web designers. The main problem is that they are supported only through propri- etary CSS extensions in Firefox and Safari. 176 | Chapter 3: Web Typography Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  3. A JavaScript solution through a jQuery plug-in provides an alternative that avoids the use of proprietary CSS properties (see http://welcome.totheinter.net/2008/07/22/multi -column-layout-with-css-and-jquery/). For techniques on how to set up column layouts, see Chapter 10. See Also The Peter-Paul Koch test column properties at http://www.quirksmode.org/css/multicol umn.html 3.36 Setting Up Multiple Columns of Text | 177 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  4. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  5. CHAPTER 4 Images 4.0 Introduction When Marc Andreessen’s first browser allowed for the inline display of images back in the early 1990s, it helped to kick-start a visually engaging aspect of surfing the Web. Shared documents no longer were just text-laden academic papers, allowing designers the initial foothold to begin the field of web design. Since those early days, designers have been using GIFs, JPEGs, and PNGs to enhance websites beyond the placement of one or two images on a web page. In this chapter, we’ll discuss many recipes regarding CSS interactions with images. Recipes include dealing with borders, manipulating background images, rounding cor- ners on boxes, replacing HTML text with images, and much more. 4.1 Transforming Color Images to Black and White in IE with CSS Problem You want to convert color images in a web page to grayscale versions in Internet Explorer. Solution Use the proprietary filter CSS property to automatically convert images to grayscale: img { filter: gray; } 179 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  6. In IE8, Microsoft is transitioning filter and other properties to use CSS vendor extensions. For more information, see http://blogs.msdn.com/ie/ archive/2008/09/08/microsoft-css-vendor-extensions.aspx. Discussion Although not the most useful CSS property, filter does have its uses. One example is to set images to gray for print stylesheets (see Chapter 11). This ap- proach saves your user money, as color inks are more expensive than black ink. Another example is to craft custom stylesheets for older versions of Internet Explorer with conditional comments (see Recipe 12.7), setting all the imagery to be black and white. This approach is what web designer Andy Clarke did with his site redesign (see http://stuffandnonsense.co.uk/blog/about/hello/). See Also MSDN documentation on the grayscale filter property at http://msdn.microsoft.com/ en-us/library/ms533003(VS.85).aspx 4.2 Setting a Border Around an Image Problem You want to place a border around an image. Solution Use the border property on the img element, as shown in Figure 4-1: img { width: 300px; border: 2px solid #666; background: #fff; padding: 2px; } Discussion If you make an image a link, you can create a more complex presentation with the border property. Using the :hover pseudo-class, you can change the style of the border when a user rolls his mouse cursor over the image, as shown on the right side of Figure 4-1: img { width: 300px; border: 2px solid #666; 180 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  7. background: #fff; padding: 2px; } a:hover img { border-style: solid; background: #999; } Figure 4-1. A border placed around an image Although the border acts like a frame around the image, you can change the border style and color when a user rolls his mouse cursor over the image. The padding of 2px set in the img declaration block allows for color changes inside this frame as well. So, a simple move of rolling over an image creates a rich visual with only two declaration blocks. See Also Recipe 4.4 for removing borders from images 4.2 Setting a Border Around an Image | 181 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  8. 4.3 Setting a Rounded Border Around an Image Problem You want to round the right-angle corners of an image border. Solution Set the border value and then use the CSS3 border-radius property along with its browser-specific border-radius properties, as shown in the right side of Figure 4-2: div{ background-image: url(beach.jpg); width: 375px; height: 500px; border: 8px solid #666; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; } Figure 4-2. Rounded borders on the right side 182 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. Discussion The radius is half the distance of a circle’s diameter and is used to set the amount of curvature on the corner. The higher the value for the radius, the more rounded the corner will be. At the time of this writing, the border-radius property isn’t supported as is; however, the proprietary properties in both Firefox and Safari replicate the effect. The main drawback (other than cross-browser support) is that the names of the border properties are not consistent, as shown in Table 4-1. Table 4-1. Rounded corner property equivalents CSS3 Firefox WebKit border-radius -moz-border-radius -webkit-border-radius border-top-left-radius -moz-border-radius-topleft -webkit-border- top-left-radius border-top-right-radius -moz-border- -webkit-border- radius-topright top-right-radius border- -moz-border- -webkit-border- bottom-right-radius radius-bottomright bottom-right-radius border- -moz-border- -webkit-border- bottom-left-radius radius-bottomleft bottom-left-radius Specifying corners Rounded corners are also rendered on individual corners, not just all four corners. To set the rounded effect on only one or a few corners, specify each rounded corner indi- vidually in the CSS rule. For example, the following CSS rule defines that all corners be rounded except for the top-right corner: div#roundbkgd { background-image: url(beach.jpg); width: 375px; height: 500px; border: 8px solid #666; /* top-left corner */ border-top-left-radius: 40px; -moz-border-radius-topleft: 40px; -webkit-border-top-left-radius: 40px; /* bottom-right corner */ border-bottom-right-radius: 40px; -moz-border-radius-bottomright: 40px; -webkit-border-bottom-right-radius: 40px; /* bottom-left corner */ 4.3 Setting a Rounded Border Around an Image | 183 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  10. border-bottom-left-radius: 40px; -moz-border-radius-bottomleft: 40px; -webkit-border-bottom-left-radius: 40px; } Known issues If the image is inline, or placed within the HTML and not as a background image, the rounded borders are shown behind the image instead of clipping the image, as shown on the left side of Figure 4-2: img { width: 375px; height: 500px; border: 8px solid #666; background: #fff; display:block; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; } To work around this problem, keep the value of the border-radius property relatively small (no more than four or five pixels) or set the image within the background of an element (see Recipe 4.5). Opera is scheduled to support border-radius for the next major release after Opera 10. See Also The CSS3 specification for border-radius at http://www.w3.org/TR/2005/WD-css3 -background-20050216/#the-border-radius 4.4 Removing Borders Set on Images by Default in Some Browsers Problem You want to remove borders on images that are clickable, as shown in Figure 4-3. Solution Set the border for images to 0: 184 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  11. a img { border: 0; } Figure 4-3. An image with a border and one without Discussion Before CSS, web developers would set the border of images through the border attribute of the img element: See Also Recipe 4.2 for applying a border to an image 4.4 Removing Borders Set on Images by Default in Some Browsers | 185 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  12. 4.5 Setting a Background Image Problem You want a background image that does not repeat. Solution Use the background-image and background-repeat properties to control the display of an image (see Figure 4-4): body { background-image: url(bkgd.jpg); background-repeat: no-repeat; } Figure 4-4. The background image displayed once in the upper-left corner 186 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  13. Discussion You can place text and other inline images over a background image to create a sense of depth on a web page. Also, you can provide a framing device for the web page by tiling a background image along the sides of a web browser. See Also Recipe 4.6 for repeating background images in a line either horizontally or vertically 4.6 Creating a Line of Background Images Problem You want a series of background images to repeat vertically or horizontally. Solution To tile the background images horizontally or along the x-axis, use the following CSS rule (see Figure 4-5): body { background-image: url(bkgd.jpg); background-repeat: repeat-x; } Figure 4-5. The background image tiled horizontally 4.6 Creating a Line of Background Images | 187 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  14. Discussion To have the background image repeat along the vertical axis, use the repeat-y value for the background-repeat property. See Also Recipe 4.7 for placing a background image at a specific location in a web page 4.7 Positioning a Background Image Problem You want to position a background image in a web page. Solution Use the background-position property to set the location of the background image. To place an image that starts 75 pixels to the right and 150 pixels below the upper-left corner of the viewport (see Figure 4-6), use the following CSS rule: html { height: 100%; } body { background-image: url(bkgd.jpg); background-repeat: no-repeat; background-position: 75px 150px; } Discussion The background-position property contains two values separated by a space. The first value of the pair sets the origin point along the y-axis, and the second value sets the point on the x-axis. If only one value is given, that value is used for the horizontal position and the vertical position is set to 50%. The Solution used pixel units to determine the placement of the background image; however, you also can use percentages. A value of 50% for background-position means the browser places the image in the dead center of the viewport, as shown in Fig- ure 4-7; the values 0% and 100% place the image in the upper-left and lower-right corners, respectively. 188 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  15. Figure 4-6. The background, placed precisely 75 pixels from the right and 150 pixels from the upper- left corner of the browser’s viewport Along with percentages, you can use the values top, center, and bottom for the y-axis and left, center, and right for the x-axis. Using combinations of these values, you can place the background image at eight points around the edges of the viewport (in the corners and in between), as well as in the middle of the viewport. For example, to re- create the value of 50% in Figure 4-7, you can use this CSS rule instead: body { background-image: url(bkgd.jpg); background-repeat: no-repeat; background-position: center; } 4.7 Positioning a Background Image | 189 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  16. Figure 4-7. The background image centered in the browser window To place a background image in the lower-right corner, as shown in Figure 4-8, you can use the following CSS rule: body { background-image: url(bkgd.jpg); background-repeat: no-repeat; background-position: bottom right; } You also can use the background-position and background-repeat properties for back- ground images that tile but aren’t chained to the sides of the viewport. See Also Recipe 4.10 for setting an image so that it doesn’t scroll; the CSS 2.1 specification for background-position at http://www.w3.org/TR/CSS21/colors.html #propdef-background-position 190 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  17. Figure 4-8. The background image placed in the lower-right corner 4.8 Using Multiple Background Images on One HTML Element Problem You want to place more than one background image within one HTML element. Solution In CSS3, the shorthand background property can accept multiple sets of background image information as long as commas separate them, as shown in Figure 4-9: h2 { border: 1px solid #666; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background: white; padding-top: 72px; text-align: center; background: url(mail.gif) top center no-repeat, 4.8 Using Multiple Background Images on One HTML Element | 191 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  18. url(printer.gif) 40% 24px no-repeat, url(gift.gif) 60% 24px no-repeat, url(content-bkgd.png) 50% 50% repeat-x, url(heading-sub-bkgd.png) 3em 3em repeat-x, url(plane.gif) center no-repeat; font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; color: #666; } Figure 4-9. Individual icons placed as background images in the heading For a discussion of the technique to position images in the background of HTML elements, see Recipe 4.7. Discussion As of this writing, Safari for Macintosh has implemented the CSS3 specification for layering multiple background images in one element. Shorthand properties Like most shorthand properties, you can split the shorthand code for multiple back- grounds into separate CSS declaration blocks: h2 { border: 1px solid #666; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; 192 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  19. background: white; padding-top: 72px; text-align: center; background-image: url(mail.gif), url(printer.gif), url(gift.gif), url(content-bkgd.png), url(heading-sub-bkgd.png), url(plane.gif); background-position: top center, 40% 24px, 60% 24px, 50% 50%, 3em 3em, center; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, no-repeat; font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; } If all the backgrounds in the CSS rule are the same value, you can place one no- repeat value in the code and apply it to all the background images: h2 { padding-top: 72px; /* enough padding for the images */ text-align: center; background: url(plane.gif), url(mail.gif), url(printer.gif), url(gift.gif); background-position: center, top center, 40% 24px, 60% 24px; background-repeat: no-repeat; } You can apply this reduction of similar values to all CSS background-related properties, making sure that you want the background images to share the same value. Not ready for everyday use For the time being, introducing new elements and applying background images to these new elements is the only way to achieve the technique of multiple images across all modern browsers. For more information and examples of these techniques, see Recipes 4.14 and 4.15. See Also The CSS3 specification for layering multiple images at http://www.w3.org/TR/2005/ WD-css3-background-20050216/#layering 4.8 Using Multiple Background Images on One HTML Element | 193 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  20. 4.9 Setting Images on a Border Problem You want to place an image on a border of an HTML element. Solution First, create an image that contains the frame of the image. Wrap the content with div elements and a unique id attribute value: Images on Borders Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.. Then use the CSS3 border-image property to place the image along the border width of the element, as shown in Figure 4-10: #section { margin-right: 40px; color: #000; font-family: Verdana, Geneva, Tahoma, sans-serif; width: 100px; text-align: center; border-style: solid; border-color: #930; border-width: 26px 39px 37px 43px; border-image: url(frame.png) 26 39 37 43 stretch stretch; -webkit-border-image: url(frame.png) 26 39 37 43 stretch stretch; -moz-border-image: url(frame.png) 26 39 37 43 stretch round; } Discussion The border-image property is a new CSS3 property that Firefox 3.1 and later and Safari 4 and later support as of this writing. When the text is resized with the Solution, the border image scales and contains the text. 194 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản