Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
2,31 MB
Nội dung
height:123px;
z-index:2;
left: 264px;
top: 0;
}
#water {
position:absolute;
width:315px;
height:323px;
z-index:1;
left: 359px;
top: −20px;
}
The left and top
properties indicate the placement of the images within their nearest
positioned ancestor element or the initial containing block. In this case, it’s the initial
containing block to the div elements. Furthermore, the body element’s margin has a
value of 0, meaning that the origin point is in the upper-left corner of the browser’s
viewport.
body {
margin: 0;
}
Even though this method works, if the web document is later modified, exact posi-
tioning becomes a design liability. For example, adding a simple headline above the
images in the HTML results in the anomaly shown in Figure 4-27:
<h2>Kids Welcome New Boat!</h2>
<img src="kids.jpg" width="360" height="304" alt="kids
playing" />
<div id="boat"><img src="boat.gif" width="207" height="123"
alt="boat" /></div>
<div id="water"><img src="landscape.gif" width="315" height="323"
alt="landscape" /></div>
Figure 4-27. Presentation breaks with addition of heading
4.22 Combining Different Image Formats | 225
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Because the image of the children has not been positioned with absolute, it moves down
the flow of the document. The other image stays in place because it has been positioned
within the initial containing block and is still in the same place it was before the headline
was added.
By using the background-positioning method within block-level elements, you can
create a self-contained module. Then, when content is added to and removed from the
web page, the presentation remains whole, as seen in Figure 4-28 and shown in the
following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Cookbook</title>
<style type="text/css">
body {
margin: 5% 10% 0 10%;
}
#content {
background-image: url(landscape.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 400px;
width: 674px;
}
h2 {
margin: 0;
padding: 0;
background-image: url(kids.jpg);
background-repeat: no-repeat;
background-position: bottom left;
height: 400px;
width: 600px;
}
#boat {
background-image: url(boat.gif);
background-repeat: no-repeat;
display: block;
width: 207px;
height: 123px;
margin-left: 250px;
margin-top: 75px;
}
</style>
</head>
<body>
<div id="content">
<h2>Kids Welcome New Boat!
<span id="boat">
</span>
</h2>
</div>
226 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
</body>
</html>
Figure 4-28. A different approach to combining images
See Also
Recipe
13.2 for creating unexpected incongruity between two elements; Recipe 13.3
for combining unlike elements
4.23 Rounding Corners with Fixed-Width Columns
Problem
You want to create rounded corners on fixed-width columns.
Solution
Create two background images, with one image containing the top corners and the
other image containing the bottom corners, as shown in Figure 4-29.
Wrap a div element around the content that’s within the column:
<div id="box">
<h2>
I Met a Girl I’d Like to Know Better
</h2>
4.23 Rounding Corners with Fixed-Width Columns | 227
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
</div>
Figure 4-29. One image for the top corners and another for the bottom corners
Place the bottom background image in the div element:
#box {
width: 214px;
background-image: url(bkgd_bottom.gif);
background-position: bottom;
background-repeat: no-repeat;
}
Then place the top background image in the h2 element, as shown in Figure 4-30:
h2 {
background-image: url(bkgd_top.gif);
backgroung-position: left top;
228 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
background-repeat: no-repeat;
padding: 7px 7px 3px 7px;
margin: 0;
border-bottom: 1px solid #999;
font-size: 1.3em;
font-weight: normal;
color: #eee;
}
Figure 4-30. A background image placed at the bottom of the column
Discussion
To
compensate for different text sizes, make the background images extend for longer
than just the space specified in the design. For example, the images used in this Solution
are 600 pixels tall; however, it’s not unheard of to have graphics that are more than
1,000 pixels tall to ensure that a page’s design maintains its integrity with extreme font
sizing.
4.23 Rounding Corners with Fixed-Width Columns | 229
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Flexible widths
By fixing the width of the column to a length unit such as pixels, it’s possible to place
an image containing two corners in one image. With column widths that change when
the user resizes the browser, however, the fixed-width solution falls apart.
See Also
Recipes 2.15, 2.16, and 2.17 for rounding corners with flexible widths
4.24 Rounding Corners (Sliding Doors Technique)
Problem
You want to round corners in columns that have flexible widths.
Solution
Use the Sliding Doors technique that was made popular by web designer Douglas
Bowman.
Create the design of the rounded corners, as shown in Figure 4-31.
Figure 4-31. The basic design for the column
Then create separate graphics for the four corners, as shown in Figure 4-32.
Wrap the content that is in the column with additional div elements:
<div id="box">
<div id="innerhead">
<h2>
230 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
I Met a Girl I’d Like to Know Better
</h2>
</div>
<div id="content">
<div id="innercontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>
</div>
</div>
Figure 4-32. The column design split up into four graphics
Then
place the background images through CSS, as shown in Figure 4-33. The top-left
corner goes in the innerhead id selector, the top-right corner slides into the preexisting
h2 element, the content id selector gets the bottom-left selector, and the innercontent
id selector houses the bottom-right graphic:
#innerhead {
background-image: url(corner_tl.gif);
background-position: top left;
background-repeat: no-repeat;
}
h2 {
background-image: url(corner_tr.gif);
background-position: top right;
background-repeat: no-repeat;
margin: 0;
padding: 7px;
4.24 Rounding Corners (Sliding Doors Technique) | 231
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
border-bottom: 1px solid #999;
font-size: 1.3em;
font-weight: normal;
color: #eee;
}
#content {
background-image: url(corner_bl.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
#innercontent {
background-image: url(corner_br.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
Figure 4-33. Rounded corners appearing on the column
232 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Discussion
The div and h2 elements act as hooks to add background images to all four corners of
the column. As the browser resizes, the background images stay in their respective
corners, as shown in Figure 4-34.
Figure 4-34. Rounded corners maintained, even though the column expands
To
make sure the design integrity is maintained as the column expands, further digital
image editing is required. Manipulate one side, either the left or the right, and expand
the two graphics both vertically and horizontally. For example, the bottom-right and
bottom-left graphics (see Figures 4-35 and 4-36) were expanded for this Solution.
4.24 Rounding Corners (Sliding Doors Technique) | 233
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 4-35. The bottom-right graphic, which is 600 pixels wide and more than 250 pixels tall
Figure 4-36. The bottom-left graphic, which is 600 pixels wide and 600 pixels tall
234 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... which include one CSS and one JavaScript file, from http://www.html.it/articoli/niftycube/index.html Upload both the JavaScript and CSS files associated with the Nifty Corners Cube solution Then link the JavaScript to the web page by using the src attribute in the script element: You won’t link directly to the CSS file, as the JavaScript... http://www.html.it/articoli/niftycube/index.html for more information about Nifty Corners Cube 4.27 Setting a Shadow on an Element with CSS Problem You want to place a box shadow on an element with CSS Solution Use the box-shadow property with proprietary browser vendor CSS properties, as shown in Figure 4-42: #header { min-width: 250px; text-shadow: 0 −1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8);... browsers) allows for a smoother transition to the tiling background See Also Recipe 4.28 for a cross-browser method for placing an image; the CSS3 specification for box-shadow at http://www.w3.org/TR /css3 -background/#the-box-shadow 4.27 Setting a Shadow on an Element with CSS | 243 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 4.28 Placing a Drop Shadow Behind an Image Problem... whimsical presentation using the word-balloon technique by adjusting the markup and CSS slightly First, place a span element with a class attribute set to no around the name in the cite element: Be bold, baby! Christopher Schmitt Next, in CSS, add the following rule, which keeps the text from being displayed in the... large amounts of traffic See Also The CSS Sprites” article at http://www.alistapart.com/articles/sprites 4.33 Using Image Sprites | 259 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 4.34 Clipping Background Images Problem You want to use only a portion of a background image in an HTML element Solution Use the proprietary Firefox CSS value -mox-image-rect to isolate part... Discussion To create a word balloon you need at least one image, which includes a balloon tail and one border of the balloon (see Figure 4-52) The image is available for download at this book’s site, http://csscookbook.com/ You create the other three sides of the word balloon by setting the border in the span tag Figure 4-52 The word balloon tail For a comic book look and feel, be sure to set the font family... transparency With the images set up, adjust the HTML to include a new div wrapper: Adjusting the first CSS image wrapper, float the image to the left, apply the drop shadow, and set some spacing between the image and the HTML content: 248 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com... Figure 4-51 Structured content for a word balloon 4.30 Making Word Balloons | 251 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Form the word balloon using the CSS border and background properties Then align the cited text so that it falls underneath the balloon tail image: blockquote { width: 250px; } blockquote p { background: url(balloontip.gif); background-repeat: . Element with CSS
Problem
You want to place a box shadow on an element with CSS.
Solution
Use the box-shadow property with proprietary browser vendor CSS properties,. image; the CSS3 specification
for box-shadow at http://www.w3.org/TR /css3 -background/#the-box-shadow
4.27 Setting a Shadow on an Element with CSS | 243
Please