Angoli smussati – Parte 1 – La soluzione CSS

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Rendere il proprio sito più accattivante è un obiettivo che ogni webmaster vuole raggiungere. Un modo semplice e rapido è rendere meno spigolosi i vari box che compongono il layout di un sito. Se usato bene l’effetto visivo è molto gradevole, senza dare fastidio in alcun modo. In questa serie di guide illustrerò diversi modi per raggiungere questo nuovo livello estetico. In questa prima puntata il metodo puramente CSS.

Il W3C, il consorzio che definisce degli standard per tutto quello che concerne la rete, ha pensato bene di includere nello standard CSS3 la possibilità di definire un raggio di smussamento degli angoli di un qualsiasi contenitore. Questa scelta deriva probabilmente dal fatto che per anni i webmaster hanno escogitato una serie di soluzioni più o meno stravaganti per raggiungere questa soluzione estetica: tabelle, span, Javascript…

Purtroppo però, per ora, pochi browser supportano questa possibilità: solo Firefox e i due browser basati su Webkit, ovvero Safari e Chrome. Tutti sperano che anche anche gli altri browser più diffusi (Internet Explorer e Opera) possano velocemente adottare questa specifica, anche se per IE temo che ci sarà da aspettare molto molto tempo.

Definire lo smussamento del bordo via CSS è veramente banale. In teoria basterebbe utilizzare la proprietà border-radius. In pratica i due browser sopra citati fanno ancora uso di due definizioni proprietarie: -moz-border-radius e -webkit-border-radius. Per cui bisognerà scrivere tre volta la stessa cosa, ma il risultato è assicurato.

Ecco un piccolo esempio:


.miaclasse {
-moz-border-radius: 3px; /* Per Firefox */
-webkit- border-radius: 3px; /* Safari e Chrome*/
border-radius: 3px; /* Standard CSS */
}


In questo modo abbiamo definito un bordo con raggio 3px. In genere è consigliabile non usare un raggio superiore al padding interno del box, altrimenti il bordo va a finire sul contenuto.

La proprietà border-radius consente anche di definire raggi diversi per i quattro angoli del box con le proprietà border-radius-topleft, border-radius-topright, border-radius-bottomleft, border-radius-bottomright. Per Firefox si possono usare -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomleft, -moz-border-radius-bottomright. Per i browser che usano webkit le proprietà sono leggermente differenti: -webkit-border-radius-top-left, -webkit-border-radius-top-right, -webkit-border-radius-bottom-left, -webkit-border-radius-bottom-right. Probabilmente però è più comodo usare la proprietà border-radius e specificare il raggio dei quattro angoli, come si fa, per esempio, con border-width. L’ordine parte dall’angolo in alto a sinistra e fa il solito giro orario.

Una cosa che non potete fare è quella di definire uno smussamento ellittico, ma esclusivamente circolare. Peccato, perché non sarebbe stato male realizzare, per esempio, dei box con il lato superiore a volta.

Finisce qui questa prima parte del tutorial dedicato agli angoli smussati. A presto!files/files/