Tel: +32 (0)3 236 0966
Gsm: +32 (0)485 080 495
Philippe Spethstraat 110
Mobiel: +31 (0)6 4124 3030
2343 CL Oegstgeest
||Rounded corner project
Look ma, no images ....
When prototyping/designing a new website you often need a few images,
most of the time 'rounded corners'.
As (D)HTML has no support for this, you must prepare
these yourself with PaintShop Pro, Photoshop.
During the process you probably have to scale these images
and/or change their colors over and over again.
We don't like this, do we?
Rounded corners in (D)HTML: No images and changing colors
you to put rounded corners on a site without (!) using images.
Ok, the only thing you need is a 1x1 transparent pixel image.
How to use this
- Put a 1x1 transparent pixel image in gfx/pixel.gif
- Add some 'style' lines to the head part of your HTML document, set the pixel url and include the library:
var cnr_pixelurl = 'gfx/pixel.gif';
// cnrSet sets up the colors of the corners
cnrSet(outside-color, border-color, inside-color)
// cnrCreate creates all four (!) corners
- Upper-left corner: cnrGet(0);
- Lower-right corner: cnrGet(1);
- Upper-left corner: cnrGet(2);
- Lower-right corner: cnrGet(3);
The following code produces a 20 pixel-radius upper-left corner, red border, blue inside:
cnrSet('#ffffff', '#ff0000', '#0000ff');
The following code produces two 40 pixel-radius corners, blue 10-pixel border, red inside:
cnrSet('#ffffff', '#0000ff', '#ff0000');
More fun: Tabs with text
I added one other feature to the library to make it easy to generate a menu with tabs.
The library functions are:
I invite you to take a look at how this is coded.
For now, I just give you an example of a menu build with three tabs.
|Copyright 2003-2006 Mooring. All rights reserved. Alle rechten voorbehouden.