Singoli angoli arrotondati con i CSS3
8 Commenti - Categoria: CSS
In un precendente articolo abbiamo visto come i Css3 ci permettono di creare i tanto attesi angoli arrotondati. Vediamo oggi come applicare questo effetto anche ai singoli angoli di un nostro box, come possiamo già vedere in figura, e quindi allargando l’occhio sullo stesso sito su cui leggi queste righe 
La proprietà border-radius, attuamente del tutto supportata solo da Firefox e Safari, anche se Google Chrome si è ormai affiancato a questi due browser, è molto versatile.
Basta infatti aggiungere le seguenti regole::
-moz-border-radius: 10px; -webkit-border-radius: 10px;
per arrotondare con un raggio di 10 pixel tutti gli angoli del nostro DIV o altro settore, ed è anche la soluzione migliore nella stragrande maggioranza dei casi.
La specifica CSS3 ha dato ai webdesigner ancora più controllo del codice css cosicchè si possano sbizzarrire con la loro fantasia. E’ posibile infatti arrotondare anche solo un angolo di un box con seguenti codici
-moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomright: 10px;
Come si può ben notare a differenza della regola base basta aggiungere topleft, topright, bottomleft o bottomright e scegliere l’ampiezza del raggio (negli esempi sono tutti a 10 px ma può essere di quanto volete).
alessandro
il mio sito è interamente costruito in css3 , inoltre abbiamo utilizzato anche il box-shadow per le ombre ottimo effetto,consiglio vivamente come sempre di
aggiornare i browser in chrome ,mozzilla o safari per gustare questi favolosi effetti
Andrea Leti
Ciao
Alessandro,
il prossimo articolo infatti parlerà proprio della proprietà box shadow..
Switchblade
Come si fa per chi (purtroppo) ancora usa Explorer? C’è un trucchetto per rendere visibile l’angolo stondato nel browser Microsoft?
Andrea Leti
per Internet explorer fino alla versione 8 non puoi fare niente.
Puoi farlo solo tramite l’uso di javascript ma appesantisce parecchio il sito e non credo sia una buoan idea.
Erriko
Ciao Andrea e complimenti per l’articolo,
anzi per il sito intero. Mi piace davvero molto questa grafica
Giuseppe
Ciao Andrea, complimenti per l’articolo, ben fatto. Volevo chiederti invece se potevi pubblicare un articolo sull’effetto che hai utilizzato per i link “seguimi su”.
grazie
Giuseppe
scusa non avevo visto su facebook che c’era il tutorial. anche se è leggermente diverso.
Quello del tuo blog riporta un contorno vivo, con quale effetto lo hai ottenuto?
Grazie ancora
Andrea Leti
Con una traccia di un pixel!