CurvyCorners, des arrondis en 2 minutes via javascript

25/08/2007
Web Développement et Design Allez aux commentaires

Avant-hier je vous présentais une application qui permettais de générer du code pour faire des coins arrondis.

Et Alban m'a donné un bon tuyau, un bout de javascript qui permet de faire la même chose :)

CurvyCorners donneras des courbes à tous vos coins, est très simplement.

Mise en place:

  • On intègre le scriptCurvyCorners
    <script type='text/javascript' src='rounded_corners.js'></script>
  • Pour une boite nommée "myDiv" à laquelle on vut appliquer des arrondis
    <div id="myDiv"></div>
  • Voici un exemple qui appliquera des arrondis a notre boite avec un rayon de 20 pixels
    <script type="text/JavaScript">
    window.onload = function(){
         settings = {
              tl: { radius: 20 },
              tr: { radius: 20 },
              bl: { radius: 20 },
              br: { radius: 20 },
              antiAlias: true,
              autoPad: false
         }
         var divObj = document.getElementById("myDiv");
         var cornersObj = new curvyCorners(settings, divObj);
         cornersObj.applyCornersToAll();
    }
    </script>

Voir la démo ainsi que la page d'explications avec d'autres méthodes ...

-----

Articles relatifs

  1. Sinklar
    25/08/2007 à 11:16 | #1
    Répondre | Citer

    Très sympathique! Comme le reste des scripts que tu proposes toujours d’ailleurs.

    Cependant, avec l’engouement pour le javascript et la surchage énorme qu’il peut représenter sur certains sites, je crois que c’est mieux, quand c’est possible de passer par un autre moyen.

    Un exemple ? On peut faire des coins arrondis très simplement grâce au CSS. Je n’en utilise pas sur mon site pour l’instant, cependant c’est une bonne alternative…

  2. k-ny
    25/08/2007 à 16:21 | #2
    Répondre | Citer

    Tout a fait d’accord Sinklar !

    D’ailleurs le 1er lien que je donne sur ce billet c’est pour la méthode via css :)

    Et vive le javascript non intrusif (ce blog fonctionne à 100% avec javascript désactivé)

  3. eugene
    31/08/2007 à 21:57 | #3
    Répondre | Citer

    alors, j’ai essayé et c’est formidable !
    le gain de temps sur le css est énorme.
    bon évidemment, quelques bugs sous ie6 si on utilise un autre effet java dans la même div qui vont finalement m’obliger à le faire quand même en css mais script à garder pour plus tard ;)
    ps. un jour faudra quand même penser à facturer à Bill le temps passé à debugger les sites sous ie, ça le motivera peut-être un peu à respecter les standard si tout le monde s’y met, va savoir ?

  4. veronica
    10/09/2007 à 09:20 | #4
    Répondre | Citer

    bravo pour ton siteplein de belles trouvailles…
    ce script est-il compatible avec mootools…

  5. luna
    01/10/2007 à 14:00 | #5
    Répondre | Citer

    k-ny >> qu’est-ce que tu appelle le « java script non-intrusif » ? Je compte me lancer sérieusement dans le JS (2/20 à mon exam l’année dernière, c’est pas très séireux… xD), donc si je peux faire les choses correctement, c’est mieux :)

  6. k-ny
    03/10/2007 à 13:08 | #6
    Répondre | Citer

    @eugène
    Tout à fait d’accord pour Bill, je ne te dis pas les galère pour rendre ce nouveau skin compatible ie6 et ie7 !

    @veronica
    Bonne question, à tester ;)

    @luna
    Non intrusif signifie que tout ton javascript est externalisé (pas de trace dans tio code source, sur des liens par exemple), et ça permet de pouvoir continuer à faire fonctionner ton site même avec JS désactivè ;)

  7. luna
    03/10/2007 à 21:06 | #7
    Répondre | Citer

    ah ok, c’est tout simplement ça ^^
    Merci pour l’info en tout cas :)

  8. david
    05/06/2010 à 09:42 | #8
    Répondre | Citer

    Bonjour,

    Mouais, je suis beaucoup moins enthousiaste que vous :)
    On est en 2010 et il apparaît que, même dans sa dernière version, ce script gère très mal les divs imbriqués (nested divs) dans IE 7 et 8.
    Ce qui pour moi le rend inutilisable dans la majorité des cas..

    Je cherche une solution sur le web mais je n’en trouve pas.