Angoli arrotondati sul proprio sito con CSS in 5 minuti

Nelle pagine web moderne, sopratutto se strutturate in maniera corretta utilizzando i fogli di stile CSS, si vedono sempre più layout con i cosìdetti rounded corners, ovvero i box in cui appare il testo o i menù del sito, hanno gli angoli arrotondati.

Indubbiamente l’effetto è molto più gradevole rispetto al vecchio box rettangolare, non trovate? 🙂

Esistono vari metodi per generare queste finestre arrotondate, andiamone ad esaminare 3: un generatore automatico di codice, un tutorial che utilizza css/xhtml, e uno che utilizza il nuovissimo CSS3, che è il più innovativo perchè non utilizza le immagini agli angoli, ma il rendering avviene tramite CSS (n.b Il css3 è supportato solo dai browser più recenti!).

Il generatore automatico, da cui è tratta l’immagine mostrata qui sopra, è raggiungibile a questo indirizzo.

E’probabilmente il metodo più adatto per i principianti, in quanto bastera selezionare il colore di sfondo e il colore del box, premere ENVIAR e verrà generata l’anteprima e il codice da incollare. Non bisogna dimenticare di copiare anche le 4 CORNER IMAGES, e copiarle sul proprio server.
Ovviamente, per renderlo più grande per accogliere una intera pagina web, bisogna agire sul css, modificando i parametri WIDTH e HEIGHT, magari impostandoli in pixel e non in percentuale.

Il secondo metodo utilizza CSS ed XHTML, ed è localizzato a questo indirizzo.

Anche in questo caso basterà copiare il codice xhtml nella pagina, e il css nel foglio di stile, e di caricare sul proprio server l’UNICA immagine rappresentata da quel cerchietto grigio.
Il codice, infatti, spezza la circonferenza in 4 spicchi e crea i 4 angoli.

L’ultimo metodo è il più avanzato, perchè sfrutta le potenzialità del nuovo CSS3, messe a disposizione dai browser più recenti come Firefox, Safari, ed Internet Explorer 8 (finalmente). E’possibile consultarlo a questo indirizzo.

Al solito, è sufficiente copiare il codice html e css nei rispettivi posti, per sfruttare la proprietà BORDER RADIUS del css, che genererà degli angoli in tempo reale, senza sfruttare delle immagini esterne. Ovviamente IE7 ed altri browsers più vecchi non supportano il css3, ma nell’articolo è spiegato come usare una versione con le immagini esterne IN CASO venga rilevato un browser vecchio, in modo da non avere problemi di compatibilità.

Non preferisco altri metodi che creano gli angoli arrotondati come quelli in Java, avendo una naturale avversione per quest’ultimo 🙂