PROJECTEN  
CONTACT-BE

Tel: +32 (0)3 236 0966
Gsm: +32 (0)485 080 495
Mail: info@mooring.be
Philippe Spethstraat 110
2950 Kapellen

CONTACT-NL

Mobiel: +31 (0)6 4124 3030
Mail: peterpm@xs4all.nl
Irislaan 247
2343 CL Oegstgeest

PROJECTEN

LP-naar-CD  NEW 
Flash sound
Rounded corner
Linux
SME server
VideoCD
Funstuff
Relax
  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

What I did was develop some javascript library code that allows 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

  1. Put a 1x1 transparent pixel image in gfx/pixel.gif

  2. Add some 'style' lines to the head part of your HTML document, set the pixel url and include the library:

    ...
    <head>
    ...
    <style>
    #cnr {
    position: absolute;
    height: 1px;
    overflow: hidden;
    }
    </style>
    ...
    <script language="javascript">
    var cnr_pixelurl = 'gfx/pixel.gif';
    </script>
    <script language="javascript" src="js/cnr.js"></script>
    ...
    </head>
    ...

  3. Add Javascript code to create the corners:

    // cnrSet sets up the colors of the corners
    cnrSet(outside-color, border-color, inside-color)

    // cnrCreate creates all four (!) corners
    cnrCreate(radius, border-width)

  4. Add Javascript to insert the corners:

    - Upper-left corner: cnrGet(0);
    - Lower-right corner: cnrGet(1);
    - Upper-left corner: cnrGet(2);
    - Lower-right corner: cnrGet(3);


EXAMPLE

The following code produces a 20 pixel-radius upper-left corner, red border, blue inside:

cnrSet('#ffffff', '#ff0000', '#0000ff');
cnrCreate(20, 1);
cnrGet(1);

The following code produces two 40 pixel-radius corners, blue 10-pixel border, red inside:

cnrSet('#ffffff', '#0000ff', '#ff0000');
cnrCreate(40, 10);
cnrGet(0); cnrGet(1);



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:

- getRectHTMLStart
- getRectHTMLEnd

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.