These demos show how curvyCorners copes in a more complex styling
environment, where units are expressed in font-relative or real-world units.
Currently (as at SVN rev. 34) corners cannot be expressed other than in
pixels, although it is hoped to address this shortly.
Note that the tabs above have fluid width. curvyCorners can cope with both
fixed-width and fluid boxes.
The contents of this page area will change depending on which tab you click.
This is accomplished by a piece of javascript which hides the currently
selected page area, sets the tab styles to reflect the new current tab,
calls curvyCorners to re-draw the tabs, and finally un-hides the appropriate
new page area.
In a little more detail: whenever a box needs to be redrawn (perhaps because
its contents will change, or because it needs to be re-styled), this must be
indicated by using the special class name "curvyRedraw". Then, if properties
are to be changed on one of the redrawable objects, this can be done as
follows:
curvyCorners.adjust(DOMobject, 'propertyname', 'newvalue');
Finally, a call to curvyCorners.redraw() will redraw all the
redrawable objects on the page. In this demo, all the tab boxes, and the
lower main box, are all redrawn when a tab is clicked.
Page 2
This is the styling for the <div> on this page:
margin: 0.5in auto;
border: 0px solid #fff;
color: #fff;
width: 60%;
padding: 20px;
text-align: left;
background-color: #33F;
border: 3px solid #fff;
background-image: url(backrepeat.jpg);
background-repeat: repeat-x;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
Note that the background repeats, and that the box is styled
with a percentage value.
Page 3
Style for this div:
margin: 20px auto;
color: #fff;
width: 500px;
height: 550px;
padding-left:2em;
background-image: url(backtest.jpg);
background-repeat: no-repeat;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
The photo is cropped because of the fixed box size.
Page 4
This is the styling for this div:
margin: 0.2in auto;
color: #fff;
width: 60%;
padding: 20px;
text-align: left;
background-color: #33F;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
You don't have to round all the corners of a box. There are some constraints,
mostly common sense, about box styling.
For example, it makes no sense to style a box
with rounded top corners, a top border but no side border; and the results
can be relied upon to look odd!
You can of course have rounded top corners with
a border to left, top and right (but none on the bottom).
That is how the tabs are styled.
Page 5
Left aligned
Centred
Right aligned
These boxes have fluid height and fixed width. curvyCorners correctly
applies text alignment styles.
Page 6
We hope you find these demonstrations helpful.
For further information about curvyCorners, visit the
web site.
Latest builds are available from the repository at
Google Code.
And please, if you use curvyCorners on a commercial basis,
make a donation!