Tài liệu CSS Cookbook- P5 doc

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
/>-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 />-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 />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 />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
/>See Also
MSDN documentation on the grayscale filter property at />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 />-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.
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:
<a href="">
<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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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.
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.
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.
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;
}
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

4.7 Positioning a Background Image | 189
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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 />#propdef-background-position
Figure 4-7. The background image centered in the browser window
190 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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,
Figure 4-8. The background image placed in the lower-right corner
4.8 Using Multiple Background Images on One HTML Element | 191
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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.
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 />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.
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:
<div id="section">
<h2>Images on Borders</h2>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum
e pluribus unum </p>
</div><! /#section >
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.
Not only does the border-image
property allow you to frame content with one image
that 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;
width: 250px;
padding: 10px 0 10px 0;
border-style: solid;
border-color: #666;
border-width: 0 17px 0 17px;
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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
color: white;
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0px 0px 5px rgba(0,0,0,.8);
}
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:
border-width: 0 17px 0 17px;
Then
bring in the image through the url() function with the background-image
property:
border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);
The next four values should match the values of the border-width property for the top,
right, bottom, and left sides of the HTML element:
border-width: 0 17px 0 17px;

border-image: url(bkgd-button.png);
border-image: url(bkgd-button.png) 0 17 0 17;
The values of 0 for border-image instruct the browser to cover the entire top and bottom
borders with the border image. The values of 17 indicate that 17 pixels of the border
image on the right and left sides should be used.
196 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Set the next two values to stretch so that the background image expands across the
distance 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 also
tiles, but makes the tiling of the image fit nicely between the edges).
See Also
The CSS3 specification for border-image at />#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
down a web page.
Solution
Use the background-attachment property set with a fixed value, like so:
body {
background-image: url(bkgd.jpg);
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 acceptable

value for background-attachment is scroll, which is the default value. So, even if you
don’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, and
you 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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 4-12. The photo staying in place as the visitor scrolls
198 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Here’s the code:
body {
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: −125px 75px;
margin: 75px 75px 0 375px;
}
h1, h2, h3 {
padding-top: 0;
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 than

body. For example, try the heading elements when designing a review for a movie or
concert. The following CSS rule can create an interesting surfing experience:
h1, h2, h3 {
font-size: 200%;
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1.5em;
text-align: center;
color: white;
}
Because of the padding and light color on the headings, there is enough room to see
the background image “through” the elements as well as to read the headlines. As the
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 background-
attachment at />ment
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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.