jQuery

Angoli arrotondati con jQuery

Dopo l’uso di tanti script per creare l’effetto arrotondato ad angoli, ho trovato questo plugin di jQuery che mi ricrea lo stesso effetto senza l’utilizzo di immagini o margini.

Compatibile con i maggiori browser, anche i più datati, il plugin jQuery Corners è cartterizzato dalle seguenti features:

  • pesa meno di 8000 bytes dopo la compressione effettuata con YUI Compressor
  • anti-aliasing veloce per i browser più anziani
  • angoli nativi per browser utilizzati su Safari, iPhone e Firefox 3
  • tasti dei moduli e ancore facilmente designati e arrotondati

Una volta che jQuery e lo script jQuery.corners vengono caricati, è semplice creare gli angoli arrotondati:

l’unica raccomandazione è dare abbastanza riempimento al box, poi è possibile anche impostare il raggio d’angolo:

Per quanto riguarda i bottoni nei moduli e le ancore possono essere trasformati in pulsanti con angoli arrotondati:

richiedono regole CSS

E’ possibile personalizzare lo script con opzioni passate come stringhe:

  • 5px – imposta raggio dell’angolo (di default è 5)
  • 10px 6px – imposta raggio X e Y con valori diversi
  • anti-alias – angoli anti-alias (di defaut)
  • transparent – per immagini di sfondo utilizzare qusta opzione
  • no-native – disabilita tutte le estensioni border-radius specifiche per i diversi browser
  • webkit – consente l’uso di -webkit-border-radius compatibile con i browser Safari e iPhone
  • mozilla – consente l’uso di -moz-border-radius su Firefox 3+ e altri browser basati su Mozilla
  • top, right, bottom, left, top-left, top-right, bottom-left, bottom-right – applica effetto solo su specifici angoli

You might also like

  • Mi sembra davvero ottimo plugin.. attualmente mi arrangio con moz-radius ma è compatibile solo con i browser che usano webkit

    17 novembre 2008
  • Angelo ha scritto:

    Mi sembra davvero ottimo plugin.. attualmente mi arrangio con moz-radius ma è compatibile solo con i browser che usano webkit

    scusami angelo se ti correggo, volevi dire forse browser che utilizzono engine Mozilla

    17 novembre 2008
  • “Per quanto riguarda i bottoni nei moduli e le ancore possono essere trasformati in pulsanti con angoli arrotondati”

    Scusa l’ignoranza: trasforma automaticamente i bottoni nei moduli in pulsanti con angoli arrotondati senza intervenire sull’immagine originale?

    17 novembre 2008
  • @ Kobayashi:
    come puoi vedere dal codice descritto sopra è semplicissimo come per i div, però è di obbligo impostare delle regole CSS associate ai bottoni

    17 novembre 2008
  • Ottima segnalazione, la prossima volta metti anche una demo del funzionamento. Molto utile per una prima occhiata al risultato! 😉

    17 novembre 2008
  • Hai ragione era mia intenzione… poi per motivi di lavoro non ho avuto più il tempo di aggiornare l’articolo con mie esempi.

    17 novembre 2008
  • Roberto

    Ciao,
    ho seguito alla lettera le istruzini presenti su questo post, ma lo script non mi funziona!! Forse sarò imbranato io.
    Vi spiego, in pratica, ho incluso i due file jquery e jquery_corner, ed ho creato la mia div alla quale ho associato la seguente funzione js:

    $(document).ready( function(){
    $(‘.rounded’).corners();
    });

    Premetto che la classe è quella giusta.
    In pratica mi da, in explorel, il simbolo del punto esclamativo in basso a sinistra tipico degli errori js.
    Oltretutto se togliessi la suddetta funzione l’errore scomparirebbe, quindi escluderei che sia a livello dei jquery inclusi nella pagina. Ho fatto mille tentativi, ma niente!.

    Vi prego aiutooo!
    Grazie Roberto.

    17 novembre 2008
  • Ciao ho provato a fare angoli arrotondati su un pulsante di un form soltanto che al click il form non parte
    sapresti aiutarmi?

    17 novembre 2008

LEAVE A REPLY