immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Angoli arrotondati con jQuery

di MaiNick | 17 Nov 2008 | jQuery | 8 Commenti

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:

<div style="background-color:#c00; padding:5px;" class="rounded">
    Esempio div
</div>
<script type="text/javascript">
    $(document).ready( function(){
        $('.rounded').corners();
    });
</script>

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

<div style="background-color:#acc; padding:10px" class="rounded">
    Esempio con raggio X e Y con dimensioni diverse.
</div>
<script type="text/javascript">
    $(document).ready( function(){
        $('.rounded').corners("30px 10px");
    });
</script>

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

<a href="javascript:" onclick="alert('Hello, World!')" class="rounded {transparent} button">
    Premere
</a>
<form action="#">
<input type="submit" value="Submit" class="rounded {transparent} button"> 
<input type="button" value="Javascript" class="rounded {transparent} button" onclick="alert('OK!'); return false;">
</form>

richiedono regole CSS

a.rounded, .button {
    outline: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle; /* or top */
    display: -moz-inline-box;
    display: inline-block;
    overflow: visible; /* IE6 form button fix */
}
.button {
    color: #000;
    background-color: #c00;
    padding: 5px 7px;
}
.button:hover {
    background-color: #c00;
}

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
Tags: , , ,

8 Commenti

  1. Angelo ha detto:

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

  2. MaiNickWeb ha detto:

    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

  3. Kobayashi ha detto:

    “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?

  4. MaiNickWeb ha detto:

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

  5. DnaX ha detto:

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

  6. MaiNickWeb ha detto:

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

  7. Roberto ha detto:

    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.

  8. Domenico ha detto:

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

Trackbacks

Lascia un Commento

^ Torna su