Voor CSS was dat enkel mogelijk door een tabel te maken en die zo vorm te geven dat je in de hoeken plaatjes van ronde hoeken kon zetten en het leek alsof er ook echt ronde hoeken stonden.

Nog steeds gebruiken veel vormgevers deze techniek die de accessibility van de website drastisch verslechteren, de HTML vervuilen met onnodige tabellen en een heleboel kleine afbeeldingen vereisen. En dit terwijl er een veel beter alternatief is!

Introducing: Rico.Corner.round()!

Het gebruiken van een javascript library die het maken van ronde hoeken voor de vormgever regelt, zonder ook maar een enkele tabel te gebruiken. Door de kracht van javascript, de DOM en CSS te combineren.

Om dit te realiseren zijn er verschillende libraries die gebruikt kunnen worden. Omdat ik dit gerealiseerd heb voor ATK en de Rico library al in ATK (ATK>5.6) zit, heb ik deze gebruikt, maar ik raad vormgevers ook aan te kijken naar 'NifyCube' een iets makkelijker te gebruiken (maar minder makkelijk te debuggen) implementatie.

Hoe?
Zorg eerst dat de Prototype library en de Rico library geladen zijn, in ATK (ATK>5.6) kan je dit in je template doen het volgende toe te voegen:



Hierna kan je simpelweg het volgende doen:



Rico en padding

Een van de dingen waar ik al snel tegen aan liep is dat Rico geen rekening houdt met padding. Als je padding in je div hebt staan zal Rico het negeren en ronde hoeken genereren op de plaats waar het zou moeten als er geen padding was.
Om dit te omzeilen kan je de volgende truuk gebruiken:



Een wat minder nette manier om padding te realiseren... door simpelweg een margin te gebruiken op de inhoud .

Ronde hoeken op classes

Waar ik hierna tegenop liep is het feit dat Rico (in tegenstelling tot Nifty) het niet ondersteund om een className mee te geven waarvan die alles moet uitrusten met ronde hoeken.
Maar dit is simpel op te lossen door het volgende te implementeren:



Opties voor ronde hoeken

Op een gegeven moment wil je meer dan simpelweg alle hoeken afronden, Rico ondersteund ook bepaalde opties die je mee kan geven als attributen van een Prototype class, voorbeeld:



Rico ondersteund de volgende opties:

corners
Welke hoeken rond gemaakt moeten worden, mogelijkheden:
- all (standaard)
- top
- bottom
- tl (top left)
- tr (top right)
- bl (bottom left)
- br (bottom right)

Voorbeeld:


color
De kleur van de rand, dit komt standaard van de fromElement en zal de kleur gebruiken van het huidige element.

bgColor
De achtergrond kleur die gebruikt moet worden, standaard wordt het fromParent element gebruikt die de kleur zal gebruiken van het 'parent' element.
LET OP: Firefox ziet vaak (vooral bij divs in divs) de 'body' als parent, om hier omheen te komen kan je de volgende truuk gebruiken:



blend
Is 'true' of 'false' (standaard), indien dit 'true' is zal Rico proberen de kleuren in elkaar over te laten gaan.

border
Hier kan je de kleur van een eventuele rand (denk aan de rand van een tabel) mee geven.

compact
Is 'true' of 'false' (standaard), indien dit 'true' is zal Rico een kleinere hoek genereren, dit is vooral handig voor kleine vlakken.

Conclusie
Door gebruik te maken van de Rico library is het maken van ronde hoeken een (rond) eitje .