Building Rounded Corners With CSS and JavaScript - The CSS approach
(Page 3 of 6 )
CSS are great for implementing decorative effects that improve the overall presentation of a Web page. What’s more, they are remarkably powerful for achieving outstanding background effects within pages. Since rounded corners can be implemented as background images, instead of being directly inserted into documents with <img> tags, we’ll see how to make use of CSS extensive capabilities for manipulating background images, and finally obtain our desired effect.
With CSS, a background image can be applied to any element of a page. Backgrounds can be manipulated in several ways to widely expand their visual impact.
They can be repeated horizontally, vertically, or not repeated at all. Also, they can be positioned using absolute or relative measurements, fixed while page elements scroll, and positioned relatively to each corner of the element. A few simple CSS declarations will properly explain this:
/* background image stays fixed */
.fixed {
background: #eee url(bg.gif) fixed;
}
/* background image repeats in x axis */
.repx {
background: #eee url(bg.gif) repeat-x;
}
/* background image repeats in y axis */
.repy {
background: #eee url(bg.gif) repeat-y;
}
/* background image repeats in x-y axis */
.repxy {
background: #eee url(bg.gif) repeat-x repeat-y;
}
/* background image not repeats */
.norepeat {
background: #eee url(br.gif) no-repeat;
}
/* background image locates at top left corner */
.topleft {
background: #eee url(br.gif) no-repeat top left;
}
/* background image locates at top right corner */
.topright {
background: #eee url(br.gif) no-repeat top right;
}
/* background image locates at bottom left corner */
.bottomleft {
background: #eee url(br.gif) no-repeat bottom left;
}
/* background image locates at bottom right corner */
.bottomright {
background: #eee url(br.gif) no-repeat bottom right;
}
Each CSS declaration rule shows clearly how a background image can be manipulated to obtain different effects. Although this is very basic for experienced designers, it can be handy for beginners.
Whatever great flexibility stylesheets offer to designers, they still have some limitations about implementing background images.
CSS2 imposes a significant limitation: it states that only one background image can be applied to each element of the page. Considering this restriction, we should tackle the problem of rounded corners by applying four different background images to different <div> tags, each corresponding to the corner we need to be rounded. If we’re designing with a “fixed layout” in mind, then we might embed only two images within two block-level elements, for instance <div>, <p> or headers tags, to easily get the rounded corners done.
In the next section, we’ll see those possible alternative solutions.
Next: Working with fixed boxes >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 38 
