La forza del sogno è quella di disegnare qualcosa
dove gli altri vogliono essere.
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:
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:
Nel corso degli anni ho acquisito una vasta esperienza nella progettazione e realizzazione in ambito siti e applicazioni web, ma continuo ad approfondire le mie conoscenze e a sperimentare, per migliorarmi e seguire l'evoluzione di Internet.
Mi occupo delle nuove tecnologie di sviluppo sul Web/Internet, con particolare attenzione ad Ajax, Web2.0, jQuery, PHP.
Ulteriori conoscenze da esperienze lavorative:
Angelo
novembre 17th, 2008 alle 09:25
Mi sembra davvero ottimo plugin.. attualmente mi arrangio con moz-radius ma è compatibile solo con i browser che usano webkit
MaiNickWeb
novembre 17th, 2008 alle 10:30
Angelo ha scritto:
scusami angelo se ti correggo, volevi dire forse browser che utilizzono engine Mozilla
Kobayashi
novembre 17th, 2008 alle 11:20
“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
novembre 17th, 2008 alle 12:33
@ Kobayashi:
come puoi vedere dal codice descritto sopra è semplicissimo come per i div, però è di obbligo impostare delle regole CSS associate ai bottoni
DnaX
novembre 21st, 2008 alle 22:59
Ottima segnalazione, la prossima volta metti anche una demo del funzionamento. Molto utile per una prima occhiata al risultato!
MaiNickWeb
novembre 21st, 2008 alle 23:12
Hai ragione era mia intenzione… poi per motivi di lavoro non ho avuto più il tempo di aggiornare l’articolo con mie esempi.
Roberto
ottobre 15th, 2009 alle 00:19
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
ottobre 23rd, 2009 alle 12:10
Ciao ho provato a fare angoli arrotondati su un pulsante di un form soltanto che al click il form non parte
sapresti aiutarmi?