Arrotondare Box con jQuery

Altro strumento oramai quasi essenziale per ogni sito che si rispetti è jQuery.
Googolando, ho trovato questo script che permette di arrotondare qualsiasi box (div, span e quant’altro) tramite jQuery.
http://www.malsup.com/jquery/corner/
Ha dei piccoli difetti (che per chi è perfezionista come me fanno girare gli zebedei).
Se invece volete semplificarvi la vita al massimo, c’è: Curvycorners.
Curvycorners è la soluzione più semplice per avere al volo degli angoli perfetti, poiché contiene un potente anti-aliasing.
Il primo si setta applicando la funzione corner ad una stringa jQuery tra i tag HEAD:

$(document).ready(function(){

$("div.ilnomedeldiv").corner();

});

Poi si settano i valori dentro le parentesi di .corner() (come da esempi del sito) mentre nel secondo caso la questione è ancora più semplice.
Basta inserire nel CSS i border-radius:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

e automaticamente funzionerà anche su IE.

Funzionano anche i vari parametri singoli:

	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10p

e via discorrendo.
Curvycurves può essere sfruttato maggiormente, ma questo lo lascio fare a voi!

Annunci

, , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: