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; }
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.
Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]
Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]
Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]
CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]
CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]
Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]
È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]
Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]
Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]
Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 -
Progetto a cura di
ServiziWeb Srl - Privacy & Cookies Policy