Web e code script visite 182

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

2 strumenti per testare un sito responsive

1 min Avete già iniziato a realizzare siti responsive? Il web è ormai…

webdesign

Web e code script

Velocizzare il sito con jQuery Lazy Load Plugin

3 min Abbiamo parlato a più riprese degli strumenti per analizzare la velocità…

webdesign

Web e code script

TAG HTML | Principali tag di formattazione

3 min Abbiamo detto nel precedente articolo che all’interno di ogni pagina è…