Tài liệu CSS Cookbook- P5 doc

Toplace an image that starts 75 pixels to the right and 150 pixels below the upper-leftcorner of the viewport see Figure 4-6, use the following CSS rule: html { height: 100%; } body { ba

The Solution works by snapping the text within the sup and sub elements to the baselinejust like the rest of the text Then you can position the text off of the baseline throughthe use of relative positioning (see Recipe 2.24) to re-create the desired appearance ofsuperscript 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

Known issues

The CSS3 column properties make the process of setting columns easy and automaticfor web designers The main problem is that they are supported only through propri-etary CSS extensions in Firefox and Safari

A JavaScript solution through a jQuery plug-in provides an alternative that avoids theuse 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

CHAPTER 4 Images

4.0 Introduction

When Marc Andreessen’s first browser allowed for the inline display of images back inthe 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 designersthe initial foothold to begin the field of web design

Since those early days, designers have been using GIFs, JPEGs, and PNGs to enhancewebsites 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

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 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 Explorerwith conditional comments (see Recipe 12.7), setting all the imagery to be black andwhite This approach is what web designer Andy Clarke did with his site redesign (see

Figure 4-1 A border placed around an image

Although the border acts like a frame around the image, you can change the borderstyle and color when a user rolls his mouse cursor over the image The padding of2px 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 declarationblocks

See Also

Recipe 4.4 for removing borders from images

4.2 Setting a Border Around an Image | 181

4.3 Setting a Rounded Border Around an Image Problem

You want to round the right-angle corners of an image border

The radius is half the distance of a circle’s diameter and is used to set the amount ofcurvature on the corner The higher the value for the radius, the more rounded thecorner 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 maindrawback (other than cross-browser support) is that the names of the border propertiesare not consistent, as shown in Table 4-1

Table 4-1 Rounded corner property equivalents

For example, the following CSS rule defines that all corners be rounded except for thetop-right corner:

div#roundbkgd { background-image: url(beach.jpg);

Opera is scheduled to support border-radius for the next major release after Opera 10.

Before CSS, web developers would set the border of images through the border attribute

of the img element:

<a href="http://csscookbook.com">

<img src="beach.jpg" border="0" alt="beach" />

</a>

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

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):

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 bytiling 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 CSSrule (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

To have the background image repeat along the vertical axis, use the repeat-y valuefor 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 Toplace an image that starts 75 pixels to the right and 150 pixels below the upper-leftcorner of the viewport (see Figure 4-6), use the following CSS rule:

html { height: 100%;

} body { background-image: url(bkgd.jpg);

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 meansthe 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

Along with percentages, you can use the values top, center, and bottom for the y-axisand left, center, and right for the x-axis Using combinations of these values, you canplace the background image at eight points around the edges of the viewport (in thecorners 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);

To place a background image in the lower-right corner, as shown in Figure 4-8, youcan use the following CSS rule:

body { background-image: url(bkgd.jpg);

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 backgroundimage information as long as commas separate them, as shown in Figure 4-9:

h2 { border: 1px solid #666;

background: url(mail.gif) top center no-repeat,

Figure 4-8 The background image placed in the lower-right corner

4.8 Using Multiple Background Images on One HTML Element | 191

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

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 repeat value in the code and apply it to all the background images:

no-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 thesenew elements is the only way to achieve the technique of multiple images across allmodern browsers For more information and examples of these techniques, see Recipes

4.9 Setting Images on a Border Problem

You want to place an image on a border of an HTML element

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;

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.

Not only does the border-image property allow you to frame content with one imagethat can scale, but it also provides a way to create image-rich buttons for web forms,

as shown in Figure 4-11.For example, first use HTML to create a simple button:

<form action="/" method="get">

<button>Submit</button>

</form>

Then use the border-image property to set a visually interesting button, as shown in

Figure 4-11, that is better than the default rendering:

button { background: none;

border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;

-webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;

-moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch;

Figure 4-10 One image used to frame content

4.9 Setting Images on a Border | 195

Figure 4-11 One image used to create a button effect

When setting an image on a border, first set the widths of the border:

Set the next two values to stretch so that the background image expands across thedistance of the sides to create a seamless fit:

border-width: 0 17px 0 17px;

border-image: url(bkgd-button.png);

border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;

Other values besides stretch are repeat (which tiles the image) and round (which alsotiles, but makes the tiling of the image fit nicely between the edges)

background-repeat: no-repeat;

background-attachment: fixed;

}

Discussion

By using this technique, you are locking down the background image Therefore, even

if a visitor scrolls, the image remains where you placed it originally Another acceptablevalue for background-attachment is scroll, which is the default value So, even if youdon’t specify scroll, the background image moves up with the rest of the document

as the visitor scrolls down

For example, imagine you want to post on your web page a photo of a recent trip, andyou want the photo positioned on the left side of the page and your text on the right

As the reader scrolls down to read more about the trip, the photo from the trip stays

in place, as shown in Figure 4-12

4.10 Creating a Stationary Background Image | 197

Figure 4-12 The photo staying in place as the visitor scrolls

Here’s the code:

body { background-image: url(bkgd2.jpg);

margin-top: 0;

text-transform: uppercase;

}

p { text-align: justify;

}

To take this further, you can lock down the image on block-level elements other thanbody For example, try the heading elements when designing a review for a movie orconcert The following CSS rule can create an interesting surfing experience:

h1, h2, h3 { font-size: 200%;

See Also

Recipe 4.5 to position a background image; the CSS 2.1 specification for attachment at http://www.w3.org/TR/CSS21/colors.html#propdef-background-attach ment

background-4.11 Stretching Images As the Browser Resizes Problem

You want the background image to stretch as the browser resizes

4.11 Stretching Images As the Browser Resizes | 199

Use the background-size property along with related browser-vendor-specific ties, as shown in Figure 4-14:

proper-body { background-image: url(button_redstar.gif);

When setting the background-size property, the browser stretches the image according

Figure 4-13 The photo coming through the headings instead of the body element

In the Solution, setting a value of 25% instructs the browser to tile out the backgroundimage four times along the width of the browser’s viewport Since the background- repeat property is set to repeat along the x-axis, only four images are tiling out in thebackground.

The value of auto for height means the aspect ratio of the image is preserved

Firefox 3.6 supports the background-size property.

Figure 4-14 Four images placed equally at the top of the viewport, even when resized

4.11 Stretching Images As the Browser Resizes | 201

For a cross-browser solution, use HTML frames.

First create a full-bleed.html file and place an image in the body element:

<img id="stretch" 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 widthand height of the image:

body { margin: 0;

padding: 0;

}

#stretch { position: absolute;

To overlay content on top of the image, use the absolute position property and set thenew content to a high z-index value (or at least higher than the stretched image)

Using background-size

The most ideal and direct method of creating a full-bleed image effect is to use thebackground-size property (see Recipe 4.11) to stretch a background image to the entirewidth and height of a browser viewport in Safari:

body { background-image: url(green_car.jpg);

However, if the browser is made smaller, the image starts to shrink to maintain itsaspect ratio and tiles out copies of the image underneath it.

Using an iframe

Another method is to use an iframe HTML element to somehow replicate the HTMLframeset:

<iframe width="100%" height="100%" src="full-bleed.html" border="0"

noborder="noborder" frameborder="0" padding="0" spacing="0"

scrolling="no"></iframe>

However, the stretching of the image within the full-bleed.html file does not extend all

the way down in some browsers, such as Opera and Safari

Another step is to use HTML framesets However, for accessibility cerns it’s best to avoid those if at all possible.

con-See Also

Recipe 2.23 for more information on positioning elements absolutely

4.13 Making Images Scalable Problem

You want images to resize as the browser window resizes

Solution

Define the width of images to percentages, as shown in Figure 4-15:

img { border: 1px solid #cecece;

Modern browsers will scale the height of the images in relative proportion to the width

So, defining both the width and the height is not necessary

4.13 Making Images Scalable | 203

Download at WoweBook.com