Gmail: anteprima inbox
Nuova funzionalità di Gmail: anteprima inbox per le connessioni lente
22 maggio 2009
Le caramelline di Pacman
Pac-man e “soci” in 3D, tutti da gustare
26 maggio 2009
Mostra tutto

Tutorial CSS3: angoli arrotondati (border radius)

CSS3 - Angoli arrotondati con border radius

CSS3 - Angoli arrotondati con border radiusLe nuove direttive del W3C riguardanti i fogli di stile, giunte alla loro terza versione CSS3, sono ancora allo stato di bozza; ma nella certezza che prima o poi usciranno dal loro stato larvale, è interessante gettare uno sguardo al futuro.

Questo va fatto restando nei limiti dello scarso supporto che le nuove specifiche riscontrano nei vari browser; infatti solo quelli basati su Mozilla e su Webkit hanno finora implementato delle versioni funzionanti con cui è possibile provarle in anteprima.

Nelle nuove direttive sono previste alcune funzionalità, finora molto richieste, per la formattazione dei bordi degli oggetti. Oltre alle proprietà abituali, sarà possibile impostare angoli rotondi, gradienti, ombre e immagini.

Border-radius è la proprietà che permette di indicare con un’unica istruzione il raggio del cerchio dei quattro angoli di un contenitore.
Firefox ha già implementato questa funzionalità con il prefisso -moz (-moz-border-radius), mentre con Safari e Chrome è possibile farlo per mezzo dell’istruzione -webkit-border-radius.

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

Il risultato che si ottiene è questo:

Risultato border-radius; Safari e Firefox ok, Chrome non usa anti-aliasing

Le specifiche del W3C prevedono inoltre la possibilità di specificare due valori differenti per l’ampiezza dell’ellisse, una per il raggio verticale ed una per quello orizzontale, al fine di poter realizzare anche curve asimmetriche.

-moz-border-radius: 30px 15px;
-webkit-border-radius: 30px 15px;

Attualmente questa caratteristica della border-radius è implementata correttamente solo dai browser basati su WebKit, cioè Safari e Chrome, che infatti danno il seguente risultato:

Safari e Chrome usano i due valori per creare angoli di curvatura variabile

Chrome purtroppo non usa anti-aliasing, quindi le curve risultano piuttosto “sgranate”. Firefox, basato su Mozilla, interpreta invece il primo valore per gli angoli superiore sinistro e inferiore destro, il secondo valore per i restanti due.

Firefox usa i due valori per il raggio degli angoli opposti

Ovviamente è possibile impostare ogni angolo singolarmente, come è tradizione per ogni oggetto nei CSS, con le proprietà seguenti:

-webkit-border-radius-topright
-webkit-border-radius-topleft
-webkit-border-radius-bottomleft
-webkit-border-radius-bottomright
-moz-border-radius-topright
-moz-border-radius-topleft
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Anche per queste proprietà è possibile impostare due valori per ottenere curve con raggi variabili.

Se avete trovato interessante questo mini tutorial, non perdetevi i prossimi per imparare a impostare gradienti, ombre e immagini.

[Fonte]

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *