See Also Recipes 2.15, 2.16, and 2.17 for rounding corners with flexible widths 4.24 Rounding Corners Sliding Doors Technique Create the design of the rounded corners, as shown in Figure
Trang 1body { margin: 0;
}
Even though this method works, if the web document is later modified, exact tioning becomes a design liability For example, adding a simple headline above theimages in the HTML results in the anomaly shown in Figure 4-27:
posi-<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
Trang 2Because the image of the children has not been positioned with absolute, it moves downthe flow of the document The other image stays in place because it has been positionedwithin the initial containing block and is still in the same place it was before the headlinewas added.
By using the background-positioning method within block-level elements, you cancreate a self-contained module Then, when content is added to and removed from theweb page, the presentation remains whole, as seen in Figure 4-28 and shown in thefollowing code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
}
#content { background-image: url(landscape.gif);
Trang 4<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;
Trang 54.23 Rounding Corners with Fixed-Width Columns | 229
Trang 6Flexible 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 whenthe 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)
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>
Trang 7I Met a Girl I’d Like to Know Better </h2>
</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-leftcorner 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:
Trang 9The div and h2 elements act as hooks to add background images to all four corners ofthe column As the browser resizes, the background images stay in their respectivecorners, 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 digitalimage editing is required Manipulate one side, either the left or the right, and expandthe two graphics both vertically and horizontally For example, the bottom-right andbottom-left graphics (see Figures 4-35 and 4-36) were expanded for this Solution
4.24 Rounding Corners (Sliding Doors Technique) | 233
Trang 10Figure 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
Trang 11See Also
Recipe 2.16 for a simple solution to rounding corners of a column
4.25 Rounding Corners (Mountaintop Technique)
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
Trang 12Figure 4-38 Rotating the image 90 degrees
Add additional div elements around the column content:
Trang 13volutpat Ut wisi enim ad minim veniam.</p>
</div>
Then place the four corner graphics within the id and p selectors, as shown in ure 4-39:
Fig-div#box { width: 55%;
Figure 4-39 Mountaintop corner example
4.25 Rounding Corners (Mountaintop Technique) | 237
Trang 14The beauty of the Mountaintop technique rests in its simplicity Four small graphicsmade with low file sizes thanks to the GIF compression algorithm are placed in thebackground 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 orcolumn’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
Trang 154.26 Rounding Corners with JavaScript
Problem
You want to include rounded corners on elements without the hassle of introducingnew 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 oneCSS 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 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 inthe id attribute:
Trang 16This 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 tomatch the background color within the element as well as its parent element (usuallythe body of the web page) This means a developer only has to worry about settingwhich 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
Trang 17"div, h3.main div, p"
For example, to apply rounded corners to multiple elements, the JavaScript functionmight look like the following:
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 velopers to single out which corner or corners to round
de-Table 4-4 Keywords understood by Nifty Corners Cube JavaScript
4.26 Rounding Corners with JavaScript | 241
Trang 18Keyword Meaning
bottom Lower 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:
Trang 19padding: 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 valuefor 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 withRGBA, allowing for opacity This approach to color (although not supported by allbrowsers) allows for a smoother transition to the tiling background
Trang 204.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:
as PNG:
div.imgholder { float:left;
background: url(dropshadow.png) no-repeat bottom right !important;
Trang 21background: 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 howmuch 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;
Trang 22as shown in Figure 4-45 With the image that large, this technique can accommodatealmost 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 orimage of the web document without affecting the drop shadow For the other browsersthat don’t support this rule, such as Internet Explorer for Windows, go to the nextbackground property and use the GIF image as the drop shadow instead
The margin-left and margin-bottom properties in the image element control how faraway 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), changethe value accordingly
See Also
Recipe 4.29 for creating smooth drop shadows behind an image
Trang 234.29 Placing a Smooth Drop Shadow Behind an Image
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 http://www.gimp.org/).
Then, using the gradient tool, pick the gradient option that creates a fade from ground Color to Transparent, as shown in Figure 4-46
Back-Figure 4-46 Selecting the right gradient fade
4.29 Placing a Smooth Drop Shadow Behind an Image | 247
Trang 24Making sure that the background color in the Toolbar matches the background colorused in the website, create a 6-pixel fade from the left edge of the canvas toward theright side of the image.
Then repeat the creation of the fade, but this time create the fade from the top of thecanvas 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:
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:
Trang 25div.imgholder { float: left;
background: url(dropshadow.gif) no-repeat bottom right;
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;
Trang 274.30 Making Word Balloons
Problem
You want to create a word-balloon effect, as shown in Figure 4-50
Figure 4-50 A word balloon
</blockquote>
Figure 4-51 Structured content for a word balloon
4.30 Making Word Balloons | 251
Trang 28Form the word balloon using the CSS border and background properties Then align thecited text so that it falls underneath the balloon tail image:
blockquote { width: 250px;
} blockquote p { background: url(balloontip.gif);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 28px;
} blockquote p span { display: block;
padding: 0.25em 0.25em 0.5em 0.5em;
border: 1pt solid black;
Figure 4-52 The word balloon tail
For a comic book look and feel, be sure to set the font family to Comic Sans MS, a freefont from Microsoft, or use a font-embedding technique as shown in Recipe 3.4 foranother font:
font-family: "Comic Sans MS", Verdana, Helvetica, sans-serif;
Trang 29If you have a computer running the Windows OS, the Comic Sans MS font might beinstalled on your computer already Although this is a common font, some users mightnot have it installed on their systems If that is the case, the browser will look for thenext font, in the order listed in the value, until it finds a font available to render the page.You can create a more whimsical presentation using the word-balloon technique byadjusting the markup and CSS slightly First, place a span element with a class attributeset to no around the name in the cite element:
}
Place a photograph in the cite element through the background-position property tofinish the effect (see Figure 4-53):
cite { margin: 0;
Trang 30Figure 4-53 Word balloon coming from an image
4.31 Hindering People from Stealing Your Images
height: 468px;
background-image: url(face.jpg);
background-repeat: no-repeat;
Trang 31} slide img { width: 500px;
<div class="slide">
</div>
The purpose of the transparent image is to be used as a feint The users will think theyare downloading the image they desire, when in fact they are downloading an innoc-uous image
Microsoft’s Image Toolbar
In Internet Explorer 6 for Windows, Microsoft started to include a feature called the Image Toolbar
With this feature, a visitor to your site can easily email, download, or print your imagewith merely a click of the mouse To keep the Image Toolbar from appearing on yourweb pages, add the following meta tags in between the head elements:
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="imagetoolbar" content="false" / >
It’s a bit of a pain for developers to add code to their web page to keep someone else’sproduct from stealing your images, but there is not much a developer can do, as Mi-crosoft produces the most popular browser
No images are safe
Even with the Solution and Image Toolbar workaround implemented in your web page,
no image is safe from being copied from your website to a user’s computer
First, images are automatically stored by the visitor’s browser and kept in a temporaryfolder for quick reloading of web pages These cached images are routinely deleted after
a fixed amount of time or whenever a user clears his browser’s cache
However, the browser often renames these images automatically and most visitorsdon’t even know where the cached files are located on their computer
The most direct route a user can take is to simply take a screen capture of his desktopwith your image displayed on a browser The user could then import the screenshotinto his favorite digital imaging software application and crop the image
4.31 Hindering People from Stealing Your Images | 255