Graphics Programs Reference
In-Depth Information
Figure 5-23: Some alternative corners.
Furthermore, you aren't forced to always have four corners. If you only need to round two
corners, then just include the related
b
elements. For example, for a bottom-of-page footer,
you might just want to round the top two corners. So:
176
<
div
class="rounded
footer">
(
…content…)
<
b
class="c
tl">
</
b>
<
b
class="c
tr">
</
b>
</
div>
No problem!
You may have noticed that I put the
b
elements at er the content in the element being
rounded. Since they're placed using absolute positioning, it doesn't really matter where they're
placed within the rounded element. h ey could be i rst, last, or all mixed up at random. So
put them where they make the most sense to you.
One disadvantage of this approach is that if you ever change the background color of the page,
the corner image has to be recreated to match it; furthermore, if you have dif erent page
background colors throughout the site, you need a separate corner image for each possible
color and the CSS to match it. A possibly greater disadvantage is that if the background
surrounding your rounded-corner element isn't a single color, such as a gradient or a tiled
pattern, you'll get mismatches between the corners and the surrounding page. h e best you
can do with this technique is to minimize those occurrences.
Search WWH ::
Custom Search