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:
|
1 2 3 4 5 6 7 8 |
<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:
|
1 2 3 4 5 6 7 8 |
<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:
|
1 2 3 4 5 6 7 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
Angelo
Mi sembra davvero ottimo plugin.. attualmente mi arrangio con moz-radius ma è compatibile solo con i browser che usano webkit
MaiNickWeb
Angelo ha scritto:
scusami angelo se ti correggo, volevi dire forse browser che utilizzono engine Mozilla
Kobayashi
“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?
MaiNickWeb
@ Kobayashi:
come puoi vedere dal codice descritto sopra è semplicissimo come per i div, però è di obbligo impostare delle regole CSS associate ai bottoni
DnaX
Ottima segnalazione, la prossima volta metti anche una demo del funzionamento. Molto utile per una prima occhiata al risultato! 😉
MaiNickWeb
Hai ragione era mia intenzione… poi per motivi di lavoro non ho avuto più il tempo di aggiornare l’articolo con mie esempi.
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.
Domenico
Ciao ho provato a fare angoli arrotondati su un pulsante di un form soltanto che al click il form non parte
sapresti aiutarmi?