CSS  »  Articoli  »  CSS 3 

La versione 3 del CSS introduce nuove interessanti proprietà che sempre più spesso ci consentono di implementare effetti grafici, anche piuttosto avanzati, senza dover utilizzare immagini aggiuntive.

Attraverso due semplici proprietà, border-radius e box-shadow, è possibile realizzare diversi effetti grafici che finora richiedevano l’ausilio un software grafico.

Purtroppo non tutte queste tecniche sono compatibili anche con Internet Explorer. Alcuni filtri di Internet Explorer e alcune librerie Javascript online consentono di limitare i danni e simulare queste proprietà ma gli effetti non sempre sono quelli desiderati.

Perché Internet Explorer 9 interpreti nativamente almeno alcune delle regole che utilizziamo possiamo introdurre questa direttiva <meta> nell'head della pagina:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Immagini circolari

Il primo effetto che è possibile applicare alle immagini è sicuramente quello di poter realizzare immagini circolari partendo dalle stesse in versione normale.

Partendo da delle immagini come le seguenti:

Figura 1. Immagini di partenza

ed applicando un border-radius di valore pari alle dimensioni dell’immagine stessa (in questo caso 180px) realizzeremo delle immagini circolari come nell’esempio in basso (Figura 2):

Figura 2. Immagini circolari

Il codice che abbiamo utilizzato è il seguente:

img {
    -moz-border-radius: 180px;
    -webkit-border-radius: 180px;
    border-radius: 180px;
}

Esempio

Altri articoli

Altre guide

Altre newsletter