Angoli arrotondati in Css3


15 settembre 2010 3 Commenti css3

 

Css3 porta con se tantissime novità ed evita al web designer di utilizzare determinate tecniche per applicare effetti complessi. 

Oggi parliamo di uno dei tanti effetti innovativi del nuovo linguaggio di stile: gli angoli arrotondati.

Per creare un div con gli angoli arrotondati dobbiamo inserire la seguente sintassi:

1
2
3
4
5
.angoli_arrotondati {
border: 2px solid blue;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

All’atto pratico ci ritroveremo un div come nell’esempio. E da ricordare che il suffisso -moz- serve per indicare al browser firefox la presenza di angoli arrotondati mentre quello -webkit- serve per indicare tale effetto a browser safari.

Ovviamente possiamo pure decidere di rendere soltanto un angolo arrotondato:

1
2
3
4
.angolo_destro {
border: 2px solid blue;
border-top-right-radius: 15px;
}

Esempio.

Per ovvie motivazioni questi effetti al momento non sono supportati da tutti i browser. Infatti questi effetti vengono supportati da firefox , chrome e safari.

Però per poter applicare questi effetti anche su browser come Internet Explorer è possibile utilizzare una libreria capace di simulare i moduli di css3 per arrotondare gli angoli.

Questa libreria è PIE.

Basta inserire alla fine del foglio di stile css3 questo codice:

1
behavior: url(path/to/PIE.htc);

e il tutto funzionerà correttamente.

Grazie e alla prossima :)

 



Potresti trovare interessante anche

menu_css3_effetto_fade_e_radius bottoni_due_punto_zero_con_css3 pie_css3_su_internet_explorer_ie Realizziamo una lightbox in css3 e html5
Pubblicato in css3 |


Iscriviti alla newsletter

Vuoi ricevere ogni articolo che pubblico direttamente sulla tua mail ? Vuoi evitare di perdere qualsiasi articolo pubblico ? Registrati alla mia newsletter in un click.

Inserisci il tuo indirizzo mail:

3 commenti per Angoli arrotondati in Css3


michele

8 agosto 2012 alle 16:54

Ho aggiunto il seguente codice:
behavior: url(path/to/PIE.htc); 
ma non funziona comunque su Interntet Explorer…

@michele è molto strano , prova a mettere gli apici così :

behavior: url(‘path/to/pie.htc’);


michele

20 agosto 2012 alle 23:57

Ho risolto, grazie cmq :)

Lascia un Commento