[CSS] Angoli arrotondati CSS3

~Sara Littner

Posted on 19/8/2012, 13:33

+4

.

User deleted

[CSS] Angoli arrotondati CSS3
Disegnare figure arrotondate quali box o pulsanti ha sempre richiesto l'utilizzo di immagini ad hoc da richiamare tramite CSS, appesantendo così la pagina web interrogata. Con la proprietà CSS3 border-radius è invece possibile simulare questo effetto grafico in modo veloce, indicando un raggio di arrotondamento dell'angolo in questione.

Questa proprietà era già stata introdotta tempo addietro come specifica proprietaria, bisognava quindi inserire i soliti prefissi -moz (per Firefox) o -webkit (per Safari) per poterla usare su questi due browser. Ora il supporto globale è migliorato e la proprietà border-radius viene supportata nativamente da Firefox 4, Safari 5, Chrome, Opera 10.5 e IE9. Su Firefox 3 e precedenti può essere ancora usato il prefisso proprietario mentre per IE8 e precedenti non c'è alcuna speranza se non quella di usare le immagini.

Ecco un esempio semplice e abbastanza retrocompatibile (IE escluso):

CODICE

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

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Abbiamo utilizzato la sintassi contratta, in modo da applicare lo stesso raggio a tutti e 4 gli angoli; diversamente avremmo potuto creare un effetto diverso, modificando soltanto due angoli opposti selezionandoli con la sintassi estesa (border-top-right-radius, border-top-left-radius, border-bottom-left-radius, border-bottom-right-radius):

CODICE

border-top-right-radius:20px; -moz-border-top-right-radius:20px; -webkit-border-top-right-radius:20px; border-bottom-left-radius:20px; -moz-border-bottom-left-radius:20px; -webkit-border-bottom-left-radius:20px;

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

In alternativa possiamo usare una sintassi semi-contratta ed applicare i singoli valori specificandoli in senso orario a partire dall'alto (angolo alto a sinistra, angolo alto a destra, angolo basso a destra, angolo basso a sinistra), così come si è abituati a fare con margin e padding.

CODICE

border-radius:0 20px 30px 40px; -moz-border-radius:0 20px 30px 40px; -webkit-border-radius:0 20px 30px 40px

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.