Prev | Current Page 287 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

com
http://www.spiffycorners.com/
Nifty Corners by Alessandro Fulciniti
http://www.html.it/articoli/niftycube/index.html
Thrash Box from VertexWorks
http://www.vertexwerks.com/tests/sidebox/
CSS3??”values 0 to 1
Firefox??”values 0 to 1
IE??”values 0 to 100
STYLIN??™ WITH CSS - CHAPTER 7 258
Although you can add rounded corners to divs using JavaScript (see
the sidebar ???Creating Rounded Corners with JavaScript???), I will now
show you how to create rounded boxes with artwork. Creating a box
with a ?¬? xed size is as simple as making the artwork and adding it to
the page, but the trick is to create such boxes so that they expand to
accommodate whatever content is chucked into them. If you want a
?¬? xed-width graphical box to expand vertically (which is what I want
here), the easiest way is to create three pieces of artwork that go into
the background of three containing elements.
How this actually works is easier to demonstrate than explain, so
let??™s start by looking at the artwork. Here are three pieces of artwork
I need: the top graphic with the curved top edge of the box, the middle
graphic that repeats as many times as needed to ?¬? ll the center of
the box, and the bottom graphic with the curved bottom of the box
(Figure 7.14).
FIGURE 7.14 Here are the three
pieces of pale gray artwork that make
up the box.


Pages:
275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299