Je kunt er niet meer omheen tegenwoordig. Afgeronde hoeken zijn "in" in het websitelandschap. Wanneer men vroeger tekst wou plaatsen in een rechthoek met afgeronde hoeken bestonden er 2 oplossingen:

• Ofwel maakte men met een grafisch programma zoals Photoshop een afbeelding met afgeronde hoeken..
• Ofwel zette men de tekst in een tabel en werd er met behulp van 4 kleine hoekafbeeldingen hetzelfde effect bereikt.

Vereisten

Deze vroegere werkwijzen mochten dan wel hetzelfde resultaat verkrijgen, naar huidige webdesignnormen (lees: semantiek) kunnen we deze methoden echter niet meer gebruiken. Ik moest dus op zoek gaan naar een manier die aan een aantal belangrijke eisen voldeed:

• beperkte HTML-code nodig;
• opmaak met CSS;
• gegenereerde code moet XHTML valid zijn;
• werken in de 4 meest gebruikte browsers (Internet Explorer, Firefox, Opera, Netscape);
• bij voorkeur werken zonder afbeeldingen.

Tijdens mijn zoektocht op het internet kwam ik bijzonder veel manieren tegen om afgeronde hoeken te bekomen, maar het was blijkbaar heel moeilijk om een manier te vinden die tegemoet kwam aan de vooropgestelde eisen. Uiteindelijk vond ik op http://www.html.it/articoli/nifty een manier die de moeite waard is om te bespreken. De codes die hieronder volgen, heb ik dus niet zelf geschreven, maar alle eer komt toe aan de auteur van net genoemde website.

Opgelet

Het enigste nadeel aan deze methode is het gebruik van javascript, wat er ook voor zorgt dat er relatief veel (javascript)code nodig is. Eenmaal je deze code hebt ingevoegd, kun je wel op eender welke pagina van je website afgeronde hoeken gebruiken.

De HTML-code

Een van de belangrijkste eisen voor het gebruik van afgeronde hoeken is dat de HTML-code zelf erg overzichtelijk en beperkt blijft. Met dit script kan dat, want je hoeft maar één div te gebruiken waaraan je een id hangt voor de opmaak.

<div id="nifty">
Hier komt al je inhoud die je wilt weergeven 
binnen een rechthoek met afgeronde hoeken.
</div>

De CSS-code

Vervolgens plaats je in het bestand waar je de afgeronde hoeken gaat gebruiken, deze code:

<style type="text/css">
div#nifty{ margin: 0 10%; background: #9BD1FA; }
</style>

In deze stijlregels stel je de marge in die tussen de div en de tekst wordt gehouden en de achtergrondkleur van de div.

De hoeken vormen

Ook belangrijk is het stijlbestand niftyCorners.css dat de afmetingen van de afgeronde hoeken beïnvloedt. Ik heb trachten samen te vatten in de commentaarregels wat de code precies doet. Verander gerust de pixelwaarden om zelf te experimenteren en te ontdekken wat het wijzigen van waarden voor effect geeft.

.rtop,.rbottom{display:block}

/*volgende regel geeft aan met hoeveel 
pixels de hoek moet afgerond worden. In dit geval 
wordt het afgerond effect bekomen door telkens 
met 
1 pixel op te schuiven. */

.rtop *,.rbottom *{ display:block; 
height: 1px; overflow: hidden; }
/*volgende 4 regels geven aan over 
hoeveel breedte de afronding moet gaan 
per regel */
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
}

Afdrukbare versie

Het bestand niftyPrint.css zorgt er alleen maar voor dat alle tekst gewoon afgedrukt wordt zonder rekening te houden met alle CSS-codes die ervoor moeten zorgen dat de afgeronde hoeken weergegeven worden.

De JavaScript-code

We hebben verder nog een javascript nodig om de afgeronde hoeken weer te geven en de verschillende variaties die ervan bestaan (bijvoorbeeld enkel afgerond bovenaan en niet onderaan). Plaats in hetzelfde bestand deze code in de header:

<link rel="stylesheet" 
type="text/css" href="/niftyCorners.css">
<link rel="stylesheet" 
type="text/css" href="/niftyPrint.css" 
media="print">
<script type="text/javascript" 
src="/nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#nifty","#377CB1","#9BD1FA");
// andere mogelijke commando's }
</script>

Je merkt dat er in deze code verwezen wordt naar nifty.js, dit extern javascriptbestand hebben we ook nog nodig. Het zou ons te ver leiden om dit gehele bestand te verklaren, maar het zorgt ervoor dat de rondingen ontstaan en dat er verschillende variaties mogelijk zijn. Het script verwerkt verder de parameters die je in kunt geven via de functie Rounded().

Deze functie verwerkt 3 parameters:

• naam van de div waarbij afgeronde hoeken moeten toegepast worden;
• kleur van het deeltje dat niet meer binnen de div valt omdat de hoek afgerond is;
• kleur van het afgeronde hoekje zelf. Meestal is deze kleur dezelfde dan de achtergrondkleur die je aan de div meegeeft in de stijlregels.
• werken in de 4 meest gebruikte browsers (Internet Explorer, Firefox, Opera, Netscape);

Resultaat

Download hier de zipfile van het volledige pakket (het HTML-bestand, het js-bestand en de CSS-bestanden).

Het resultaat kun je in dit voorbeeld bekijken.

Eenvoudiger met alternatieve browsers

"Gecko based browsers" zoals Firefox, Mozilla en Netscape hebben echter een manier ingebouwd om op een zeer eenvoudige wijze afgeronde hoeken te bekomen. De tekst plaats je tussen de tags

fieldset {
-moz-border-radius: 70px;
}

De border-radius staat hiervoor voor in welke mate de hoek moet afgerond zijn. Helaas werkt deze methode (nog) niet in Internet Explorer en Opera.