HTML and CSS Reference
In-Depth Information
<div class="corner ctl"></div>
<div class="corner ctr"></div>
<div class="corner cbr"></div>
<div class="corner cbl"></div>
Using JavaScript to add these four corner elements into the HTML
DOM on the fly is a useful way to keep presentational elements out of
your markup and keep your code lean, especially if you are rounding multiple
different blocks on a page.
Drawing Pixels
Taking the positioning of empty elements to an extreme, you can create
boxes and meticulously re-create the pixels that draw the corners of
a containing block. This can allow for visual tricks such as anti-aliasing
and changing border radius without having to re-create background
image files, but it also makes for lots of code and markup overhead.
Like with the earlier four corners solution, you can use JavaScript to
create, plot, and position these extra elements, giving them proper
background-color . An example of this method is implemented in the
Curvy Corners JavaScript library ( ), which
uses the border-radius property in the CSS document to draw in the
rounded corner when loaded in a browser that doesn't already support
border-radius .
Border and Background Enhancements
Beyond multiple background images and rounded corners, CSS3 has
a few other tricks in store that will quickly find their way into web devel-
opers' toolboxes. Creating color gradients for background without the
use of images and creating borders with images are both covered in
Chapter 14.
Search WWH ::

Custom Search