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. Solution Wrap a div element around the content passage to set it in columns: <div id="column"> <p> <p> <h2> </h2> <p> <p> <h2> </h2> <p> <p> </div> 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. 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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. 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. 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. 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. 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- radius-topright -webkit-border- top-right-radius border- bottom-right-radius -moz-border- radius-bottomright -webkit-border- bottom-right-radius border- bottom-left-radius -moz-border- radius-bottomleft -webkit-border- 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. 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. [...]... Mozilla Developer Center article on -moz-transform at https://developer.mozilla.org/en /CSS/ -moz-transform; the Surfin’ Safari blog post about -webkit-transform at http://webkit.org/blog/130 /css- transforms/ 4.16 Setting Gradients with CSS Problem You want to create background gradients with CSS Solution Use proprietary CSS properties to set gradients in the background of elements, as shown in Figure 4-18:... https://developer.mozilla.org/en /CSS/ im age-rendering 4.15 Rotating Images with CSS Problem You want to rotate images Solution First set the img element to display as a block-level element: img { display: block; float: left; 206 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark margin: 20px; } Then use a set of proprietary CSS properties for Safari, Firefox,... and set them through the background of images (see Recipe 4.5) See Also The Surfin’ Safari blog post “Introducing CSS Gradients” at http://webkit.org/blog/175/ introducing -css- gradients/; the Mozilla Developer Center article on Firefox gradient properties at https://developer.mozilla.org/en /CSS/ -moz-linear-gradient 210 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this... 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 backgrounds into separate CSS declaration blocks: h2 { border: 1px solid #666; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius:... 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... Other values besides stretch are repeat (which tiles the image) and round (which also tiles, but makes the tiling of the image fit nicely between the edges) See Also The CSS3 specification for border-image at http://www.w3.org/TR /css3 -background/ #the-border-image 4.10 Creating a Stationary Background Image Problem You want a background image to remain in the browser window, even as the user scrolls... visitor scrolls the web page reading the review, she will see the rest of the image, as shown in Figure 4-13 See Also Recipe 4.5 to position a background image; the CSS 2.1 specification for backgroundattachment at http://www.w3.org/TR /CSS2 1/colors.html#propdef-background-attach ment 4.11 Stretching Images As the Browser Resizes Problem You want the background image to stretch as the browser resizes... the background-size property 4.11 Stretching Images As the Browser Resizes | 201 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark See Also The CSS3 specification on background-size at http://www.w3.org/TR /css3 -background/ #the-background-size 4.12 Stretching an Image Across the Entire Browser Window Problem You want to expand an image across the entire browser window Solution... src="green_car.jpg" alt="photo of green car" /> Use CSS to remove the margins and padding in the body as well as expand the width and height of the image: body { margin: 0; padding: 0; } #stretch { position: absolute; width: 100%; height: 100%; } Discussion This Solution works best in most browsers tested by leveraging the ability to remove the image from the normal flow of the document and then resetting the width... Graphics (SVG) property; however, it has been ported to work on HTML elements The property instructs the browser on how to render images that are resized The CSS rule listed in the Solution displays images with hard edges or high contrast Use the following CSS rules for smoother rendering: #content img[src$=".gif"] { image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; } For Firefox browsers, . 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. 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