CSS  »  Articoli  »  CSS 3 

La specifica CSS3 è ben lungi dall'essere completata. Molti dei moduli di cui è composta subiscono ancora modifiche anche importanti, ma alcune delle nuove e interessanti funzionalità previste sono ormai da tempo supportate dai principali browser, con l'eccezione di Internet Explorer. Molti sviluppatori, quindi, hanno già iniziato a sfruttare i vantaggi delle nuove proprietà, risolvendo il problema del mancato supporto sul browser di Microsoft con due metodi alternativi:

• Progressive enhancement. Alla base di questo approccio c'è una filosofia di fondo: nella progettazione di un sito o di una pagina "si inizia con la versione di base, poi si aggiungono miglioramenti per gli utenti che hanno dispositivi in grado di gestirli". Se voglio arrotondare gli angoli di un box con i CSS3, lo farò. A Internet Explorer servirò una versione del tutto fruibile, ma con gli angoli squadrati.
• Ricorso a tecniche alternative. Quando si parla di tecniche alternative per ottenere una resa cross-browser, la via più diretta, oggi, è quella di fare ricorso a Javascript. Tornando al caso di prima, se voglio arrotondare gli angoli del mio box anche per Internet Explorer, mi basterà usare una delle tante soluzioni disponibili sotto forma di script, magari basati su un framework come jQuery o MooTools.

A prescindere dai mal di testa a cui ci ha abituati il browser di Microsoft, comunque, per chi si occupa di design e sviluppo per il web, i CSS3 sono tema da tenere d'occhio, non solo perché è bene sapere di cosa si tratta, ma per sfruttarne sin da ora i vantaggi in fase di produzione, su progetti reali.

In questo articolo ci occuperemo dei modi con cui la nuova specifica ha definito il trattamento dei bordi, analizzando due proprietà. Nella prima parte dell'articolo parleremo di border-radius (consente di creare angoli arrotondati), nella seconda di border-image (consente di usare immagini come bordi di un elemento).

border-radius

Attraverso border-radius possiamo arrotondare a nostro piacimento gli angoli di un qualsiasi elemento. Vediamo nei dettagli come la specifica definisce questa funzionalità.

Le proprietà coinvolte sono cinque.

border-top-left-radius

Definisce l'arrotondamento dell'angolo superiore sinistro di un elemento.

I valori possono essere espressi da un numero accompagnato da un'unità di misura o in percentuale.

È possibile definire uno o due valori. Se si definiscono due valori diversi, il primo imposta la misura del raggio orizzontale, il secondo quello del raggio verticale. L'uso di due valori diversi consente di ottenere angoli ellittici. Se si usa un solo valore si applica la stessa dimensione al raggio orizzontale e a quello verticale, ottenendo angoli circolari.

#box {border-top-left-radius: 20px}

#box {border-top-left-radius: 20px 10px}

border-top-right-radius

Definisce l'arrotondamento dell'angolo superiore destro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-top-right-radius: 20px}

#box {border-top-right-radius: 20px 10px}

border-bottom-right-radius

Definisce l'arrotondamento dell'angolo inferiore destro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-bottom-right-radius: 20px}

#box {border-bottm-right-radius: 20px 10px}

border-bottom-left-radius

Definisce l'arrotondamento dell'angolo inferiore sinistro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-bottom-left-radius: 20px}

#box {border-bottom-left-radius: 20px 10px}

Altri articoli

Altre guide

Altre newsletter