Tài liệu CSS Cookbook- P6 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.31 MB, 50 trang )
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"
" /><html xmlns=" /> <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.
See Also
Recipe 2.16 for a simple solution to rounding corners of a column
4.25 Rounding Corners (Mountaintop Technique)
Problem
You want to create one set of graphics for rounded graphics while being able to display
many background colors within the column.
Solution
Use the Mountaintop technique that was popularized by web designer Dan Cederholm.
Create a small graphic that will act as the basis for the rounded corners, as shown in
Figure 4-37.
Figure 4-37. The top-left corner graphic
The black color in Figure
4-37 will be set to transparent when the image
is exported as a GIF.
Export the image as a GIF with the filename corner_tl.gif.
Then rotate the image 90 degrees (see Figure 4-38) and export it as a GIF image, naming
it corner_tr.gif. Repeat the last two steps to create the bottom corners, corner_br.gif
and corner_bl.gif.
4.25 Rounding Corners (Mountaintop Technique) | 235
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 4-38. Rotating the image 90 degrees
Add additional div elements around the column content:
<div id="box">
<div id="head_outer">
<div id="head_inner">
<h2>
I Met a Girl I’d Like to Know Better
</h2>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
236 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
volutpat. Ut wisi enim ad minim veniam.</p>
</div>
Then
place the four corner graphics within the id and p selectors, as shown in Fig-
ure 4-39:
div#box {
width: 55%;
background-color: #999999;
background-image: url(corner_bl.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
#head_outer {
background-image: url(corner_tl.gif);
background-repeat: no-repeat;
}
#head_inner {
background-image: url(corner_tr.gif);
background-repeat: no-repeat;
background-position: top right;
}
div p {
margin: 0;
padding: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
background-image: url(corner_br.gif);
background-position: bottom right;
background-repeat: no-repeat;
color: #333333;
font-size: .8em;
line-height: 1.5;
}
Figure 4-39. Mountaintop corner example
4.25 Rounding Corners (Mountaintop Technique) | 237
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Discussion
The beauty of the Mountaintop technique rests in its simplicity. Four small graphics
made with low file sizes thanks to the GIF compression algorithm are placed in the
background of four block-level elements.
Also, there is no need to expand a couple of images to make sure the design integrity
is maintained as the column resizes, as you do with the Solution for Recipe 3.22.
Plus, the Mountaintop technique allows you to quickly change the column’s back-
ground color without revising the corner graphics, as shown in Figure 4-40. However,
you will need to change the corner graphics if the background color of the web page or
column’s parent element changes.
Figure 4-40. Maintaining integrity in the column even though the color has changed and the column
has been resized
See Also
Recipe
4.24 for automatically adding corners on columns without custom-made images
238 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
4.26 Rounding Corners with JavaScript
Problem
You want to include rounded corners on elements without the hassle of introducing
new markup or images manually.
Solution
Use the Nifty Corners Cube code by Alessandro Fulciniti.
First download the components of the Nifty Corners Cube solution, which include one
CSS and one JavaScript file, from />Upload both the JavaScript and CSS files associated with the Nifty Corners Cube sol-
ution. Then link the JavaScript to the web page by using the src attribute in the
script element:
<script type="text/javascript" src="/_assets/js/niftycube.js"></script>
You won’t link directly to the CSS file, as the JavaScript file does that.
Next,
modify the markup that will have rounded corners by giving it a unique value in
the id attribute:
<div id="box">
<h2>Marquee selectus</h2>
<p> <p>
</div>
Then make a separate JavaScript call to the browser indicating which element gets the
rounded corners, and define the size of the rounded corners, as shown in Figure 4-41:
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function() {
Nifty("div#box","big");
}
</script>
Discussion
Since it’s almost a completely worry-free method for creating rounded corners, the Nifty
Corners Cube solution has been called more of a tool than a technique.
4.26 Rounding Corners with JavaScript | 239
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
This Solution is based on JavaScript. If the user does not have JavaScript
in his browser or it is turned off, the rounded corners do not appear.
Different colors
Colors are detected automatically.
The JavaScript automatically changes the colors to
match the background color within the element as well as its parent element (usually
the body of the web page). This means a developer only has to worry about setting
which element gets the curves and the size.
Different sizes
Four keyword sizes are written into the Nifty Corners Cube JavaScript: none, small,
normal (default), and big. small is equal to the value of 2 pixels, normal is 5 pixels, and
big is 10 pixels.
For example, to adjust the corners so that they are small, the JavaScript call would look
like this:
<script type="text/javascript">
window.onload=function() {
Nifty("div#box","small");
}
</script>
Figure 4-41. The rounded corners (left) and the default rendering (right)
240 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Different elements
Nifty Corners Cube accepts numerous selectors, making it easier to dictate which ele-
ments should receive rounded corners, as shown in Table 4-3.
Table 4-3. Selectors understood by Nifty Corners Cube JavaScript
Selector Example
Type "div"
"h3"
id "div#box"
"h3#main"
class "div.box"
"h3.box"
Descendant with id "div#box h3"
"h3#main div"
Descendant with class "div.box h3"
"h3.main div"
Grouping "div, h3"
"div, h3.main div, p"
For example, to apply rounded corners to multiple elements, the JavaScript function
might look like the following:
<script type="text/javascript">
window.onload=function() {
Nifty("div, h3.main div, p","small");
}
</script>
Specific corners
The
Nifty Corners Cube solution also makes allowances that developers might not want
to apply rounded edges to all the corners. Table 4-4 lists the keywords that allow de-
velopers to single out which corner or corners to round.
Table 4-4. Keywords understood by Nifty Corners Cube JavaScript
Keyword Meaning
tl Top-left corner
tr Top-right corner
bl Bottom-left corner
br Bottom-right corner
top Upper corners
4.26 Rounding Corners with JavaScript | 241
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Keyword Meaning
bottom Lower corners
left Left corners
right Right corners
all (default) All the corners
For example, to apply rounded corners to the top corners of multiple elements within
a web page, the JavaScript function might look like the following:
<script type="text/javascript">
window.onload=function() {
Nifty("div, h3.main div, p","small top");
}
</script>
Variations of this Solution for the numerous JavaScript frameworks are
available
today. You can find one such solution for jQuery at http://www
.malsup.com/jquery/corner/.
See Also
for more information about Nifty Cor-
ners 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);
-webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8);
-moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8);
background-image: -webkit-gradient(linear, left top, left bottom, from(#930),
to(#6b3703), color-stop(0.5, #903000));
background-image: -moz-linear-gradient(left top, left bottom,
from(rgba(153,51,0,.3)), to(#6b3703), color-stop(0.5, #903000));
margin: 7px;
242 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
padding: 14px;
}
Figure 4-42. An element with a box shadow
Discussion
Box shadows work in a similar way to text shadows (see Recipe 3.32).
The first value represents the distance on the x-axis, and the second value is the value
for
the y-axis. A positive value means the shadow is placed down and to the right,
respectively. Negative values place the shadow up and to the left.
The third value defines the radius or glow of the shadow.
The fourth value sets the color of the shadow. In the Solution, the color is set with
RGBA, allowing for opacity. This approach to color (although not supported by all
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 />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
You want to place a drop shadow behind an image, as shown in Figure 4-43.
Figure 4-43. A drop shadow placed behind an image
Solution
Place
the image element (as shown in Figure 4-44) inside a div element with the
class attribute set to imgholder:
<div class="imgholder">
<img src="dadsaranick2.jpg" alt="Photo of Dad, Sara, Nick" />
</div>
Set the image alignment of the div element to the left so that the text wraps around the
image. Next, set the background image of the drop shadow in two background prop-
erties. In the first background property, use an image with an alpha transparency such
as PNG:
div.imgholder {
float:left;
background: url(dropshadow.png) no-repeat bottom
right !important;
244 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
background: url(dropshadow.gif) no-repeat bottom right;
margin: 10px 7px 0 10px !important;
margin: 10px 0 0 5px;
}
Figure 4-44. The default rendering of the image
As for the image itself, set the margin-right and margin-bottom properties to define how
much of the drop shadow image shows through. Also set a border property as well as
padding to create a more dramatic effect:
div.imgholder img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #666;
margin: −3px 5px 5px −3px;
padding: 2px;
}
Discussion
The first step is to create a drop shadow image in an image-editing program such as
Adobe Photoshop. It’s best to create a background image of 600 × 600 pixels or larger,
4.28 Placing a Drop Shadow Behind an Image | 245
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
as shown in Figure 4-45. With the image that large, this technique can accommodate
almost any image used in a web page.
Figure 4-45. The drop shadow on the right and bottom sides
The
first image background property uses the !important rule to display the PNG file
as the drop shadow. By using the PNG file, you can change the background color or
image of the web document without affecting the drop shadow. For the other browsers
that don’t support this rule, such as Internet Explorer for Windows, go to the next
background property and use the GIF image as the drop shadow instead.
The margin-left and margin-bottom properties in the image element control how far
away the drop shadow image appears from the image. If your drop shadow distance
on the right or left side is more than 5 pixels (as is the one used in this Solution), change
the value accordingly.
See Also
Recipe 4.29 for creating smooth drop shadows behind an image
246 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
4.29 Placing a Smooth Drop Shadow Behind an Image
Problem
You want to have soft edges for an image’s drop shadow.
Solution
Adding another nonsemantic div wrapper around another background image allows
for the creation of soft edges on drop shadows.
First, create a new image in Adobe Photoshop that will act as a mask to soften the drop
shadow image. Using the same dimensions as the drop shadow, delete the entire image
content in the file, leaving only a transparent background.
If you don’t have access to Photoshop, try an online version at https://
www.photoshop.com/, or download a free digital imaging application
such as GIMP (see />Then, using the gradient tool, pick the gradient option that creates a fade from Back-
ground Color to Transparent, as shown in Figure 4-46.
Figure 4-46. Selecting the right gradient fade
4.29 Placing a Smooth Drop Shadow Behind an Image | 247
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Making sure that the background color in the Toolbar matches the background color
used in the website, create a 6-pixel fade from the left edge of the canvas toward the
right side of the image.
Then repeat the creation of the fade, but this time create the fade from the top of the
canvas to the bottom.
Next, save the image as a PNG-24 image with transparency, as shown in Figure 4-47.
Figure 4-47. Saving the image as a PNG with alpha transparency
With the images set up, adjust the HTML to include a new div wrapper:
<div class="imgholder">
<div>
<img src="dadsaranick2.jpg" alt="Photo of Dad, Sara, Nick" />
</div>
</div>
Adjusting
the first CSS image wrapper, float the image to the left, apply the drop shad-
ow, and set some spacing between the image and the HTML content:
248 | Chapter 4: Images
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
div.imgholder {
float: left;
background: url(dropshadow.gif) no-repeat bottom right;
margin: 0 7px 7px 0;
}
Next,
bring in the mask that will soften the drop shadow background as well as make
room to display both the drop shadow and the mask, as shown in Figure 4-48:
div.imgholder div {
background: url(shadowmask.png) no-repeat;
padding: 0 6px 6px 0;
}
Figure 4-48. The smooth edges now on the drop shadows
Finally, add some padding and a border to the image, as shown in Figure 4-49:
div.imgholder img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #666;
4.29 Placing a Smooth Drop Shadow Behind an Image | 249
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
