Web e code script visite 81

Come smussare angoli di immagini e div con CSS3 Border Radius

1 min

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca agli utenti di browser moderni. Una novità che sta prendendo decisamente piede dopo questi ultimi cambiamenti è il border radius.

Prima per arrotondare immagini e div utilizzavamo immagini (spesso utilizzate come sfondo) realizzate attraverso i programmi di grafica, ora invece non ce n’è più bisogno, bastano poche righe di codice per ottenere il medesimo risultato, ossia smussare gli angoli.

Come arrotondare gli angoli di un div (ma anche di una img)? Appunto attraverso la proprietà border-radius, costruita pensando anche ai browser più datati.

#nomeDiv {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

Nell’ordine si parla dell’angolo in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

Questo invece è ciò che succede se il raggio del border radius è identico per i quattro angoli:

#nomeDiv {
border-radius: 5px;
}

Per quanto riguarda la compatibilità del border radius con i vari browser Opera 10,5 e Internet Explorer 9 non necessitano di una proprietà con prefisso. Firefox e Safari invece necessitano di una piccola accortezza, per cui il codice diviene questo:

#nomeDiv {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

border-radius-css3

Il tool online per il Border Radius

Questo è ciò che riguarda la teoria. Conoscerla è sempre importante anche se ormai online c’è un tool per ogni cosa. A voi pigroni quindi consiglio un sito dedicato che fa il lavoro sporco al posto vostro. Come si chiama il sito? Indovinate un po’? Border-radius.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Le 4 migliori photogallery lightbox in jQuery

2 min La maggior parte dei siti creati di recente utilizza ormai photogallery…

webdesign

Web e code script

Come creare il caricamento di un filmato swf in Flash

1 min Conoscete il detto “il tempo è denaro”? Niente di più vero,…

webdesign

Web e code script

Icone Vettoriali Gratis. Prova Flaticon, il più grande database

1 minSe siete alla ricerca di icone vettoriali gratis per i vostri siti…