Tra le tendenze di design nell’epoca del web 2.0 c’è senza dubbio quella di fare largo uso degli angoli arrotondati per i diversi elementi della pagina. Solitamente si provvede creando delle immagini ad hoc e posizionandole tramite CSS. Oggi esamineremo un’alternativa in Javascript: si chiama Curvy Corners, e dall’originario script ne è stata realizzata una versione da utilizzare come plugin di JQuery.

L’utilizzo è davvero molto semplice. Bisogna per prima cosa richiamare nella pagina il pacchetto JQuery e il plugin in questione:

<script src=“jquery-1.2.3.pack.js”
type=“text/javascript”></script>

<script src=“jquery.curvycorners.packed.js”
type=“text/javascript”></script>

A questo punto possiamo inserire la funzione javascript che si occupa di applicare gli angoli arrotondati alle classi di elementi specificate. Vediamo tre possibili utilizzi della funzione e i relativi parametri:

<script type=“text/javascript”>
	$(function(){

		$(’.c’).corner();
		$(’.c2′).corner({
		 tl: { radius: 16 },
		 tr: { radius: 16 },
		 bl: { radius: 16 },
		 br: { radius: 16 },
		 antiAlias: true,
		 autoPad: true,
		 validTags: [”div”] });
		$(’.c3′).corner({
		 tl: { radius: 16 },
		 tr: false,
		 bl: false,
		 br: { radius: 16 },
		 antiAlias: true,
		 autoPad: true,
		 validTags: [”div”] });

	});
</script>

Nella prima funzione vengono applicati gli angoli arrotondati agli elementi facenti parte della classe “c”, mantenendo tutti i parametri di default.

Nella seconda vengono applicati degli angoli di 16px ai DIV facenti parte della classe “c2″. Diamo un breve sguardo ai diversi parametri della funzione. Innanzitutto è possibile specificare differenti dimensioni per i 4 angoli: tl sta per top-left (in alto a sinistra), tr per top-right (in alto a destra), bl per bottom-left (in basso a sinistra) e br per bottom-right (in basso a destra); le dimensioni vengono fissate in pixel. Antialias riguarda ovviamente l’antialiasing, può essere impostato su true (per ottenere angoli più nitidi) o su false. Autopad, se impostato su true, provvede a creare automaticamente un DIV interno a quello al quale viene applicata la funzione, e ad inserirci dentro il contenuto; questa operazione è necessaria in quanto non è possibile impostare la proprietà padding per il DIV al quale vengono applicati gli angoli arrotondati. Validtags, infine, specifica per quali tipi di elementi (nel nostro caso DIV) ha valore la funzione.

La terza funzione è analoga alla seconda, con l’unica differenza che l’angolo in alto a destra e quello in basso a sinistra non vengono trasformati in angoli arrotondati, grazie all’assegnazione del valore “false” al posto della dimensione in pixel.

Per visualizzare un esempio delle funzioni esaminate potete consultare questa pagina, cliccando sulla voce “Examples”. Nella stessa pagina è disponibile anche il link per il download del pacchetto.
Ricordatevi che per il corretto funzionamento è necessario scaricare anche JQuery dal sito ufficiale.

Altri articoli che potrebbero interessarti

• Effetti di transizione sulle immagini