curvy corners
geen loodzware scripts nodig

home | index | menu | help

Er is geen CSS ondersteuning.


		

een curvy link

cross browser link

CurvyCorners 3.0


		

Er is ergens op het www een website die curvy corners in de aanbieding heeft. Ziet er erg mooi uit. De knopjes die je hier boven ziet staan lijken een beetje op de knopjes van de curvy-corner website.

De reden dat ik ze op de dns5 heb neergezet is dat bij de "curvy-website" er eventjes (voor IE) een stuk javascript van meer dan 20K tegenaan wordt "gegooid". Auw! De gehele front-pagina van de dns5 is nog geeneens 10K (ongecomprimeerd..). Een andere reden is dat er op de curvy-site er van de verschillende mogelijkheden van de browsers wordt gebruik gemaakt om de ronde hoekjes te maken. Elke browser heeft dus zijn eigen specifieke code. Maakt het natuurlijk eenvoudig om de code te maken: maar toch..

Misschien zijn de knopjes op de dns5 niet exact hetzelfde als op de curvy-site, maar ze zijn wel ongelooflijk veel sneller (dan de script-versie) en werken zonder problemen in alle moderne browsers (natuurlijk ook in IE en opera). Kopieer uit de broncode van de curvy-corner pagina de 17 regeltjes CSS-code en gebruik de div's uit de body (begint met class "rh" en verder) om even een beginnetje voor jezelf te hebben.

Expirementeer een beetje met de kleuren: Je kan 12 gebieden een verschillende kleur geven (inclusief de borders). Op de dns5 heb ik ze een beetje "rustig" gehouden. Er is nog een voordeel om deze procedure te gebruiken. Al die speciale code die de curvy-site gebruikt, valideert natuurlijk van geen kanten (een donker-rode validator). Deze procedure valideert html5 en natuurlijk op de css.

Nog even een vriendelijk woord voor de "curvy-corner-site".. Ik wil jullie niet de bodem intrappen en ik vind jullie website heel mooi gemaakt en ik wens jullie erg veel succes met de nieuwe versies van curvy corners. Ik denk alleen maar aan de gebruikers-ervaring van de bezoekers. En die zijn meer gebaat bij razendsnelle pagina's (die er misschien niet zo mooi uitzien als met jullie product).

Ik was het bijna vergeten...
De knopjes staan nu onder elkaar. Als je een float:left; bij de eerste "rh" in de style-sheet toevoegt staan ze gewoon naast elkaar.

UPDATE:
Er is opgemerkt dat de knopjes op deze pagina GEEN randje hebben. Geen probleem. Kijk even op deze pagina hoe je de knopjes ook nog een ronde rand geeft.

cache 28-05-2010