Blackotine

Coins arrondis en css et javascript

Récemment, j’ai du découper un design comportant de nombreux coins arrondis, de tout styles, avec ou sans bordures, couleur de fond etc…

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools. Lire la suite »