CSS3 Border Radius: arrotonda gli angoli
sabato 18 Dicembre 2010
Il CSS3 è l’evoluzione del CSS, un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. L’evoluzione di questo linguaggio stà sconvolgendo positivamente la materia del Web Designer, che fin ora lavorava quasi esclusivamente con le immagini e che oggi, per favorire aspetti fondamentali di Web Marketing, deve essere un’esperto in materia CSS.
Oggi introduco la rubrica Proprietà CSS3 nel mio blog, nel quale ogni mese pubblicherò una nuova funzione CSS3 per abbellire e alleggerire il vostro sito.
La proprietà CSS3 che analizzerò oggi è: border-radius, permette di utilizzare facilmente gli angoli arrotondati negli elementi di design, senza bisogno di immagini, ed è probabilmente una delle proprietà più famose dei CSS3.
Vediamo subito come si presenta:
Sintassi e definizione di border-radius
Come per molte proprietà dei CSS relative ai margini, padding e bordi, ci sono quattro singole proprietà per ogni angolo del box più la proprietà scorciatoia, che applica a tutti gli angoli il medesimo valore.
Di seguito la definizione della sintassi dei CSS dei browser in questione:
| CSS3 | Mozilla | WebKit |
|---|---|---|
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
| border-radius | -moz-border-radius | -webkit-border-radius |
Border-Radius con valore unico
La proprietà border-radius viene generalmente utilizzata con un unico valore che assegna ad ogni angolo la stessa dimensione:
-moz-border-radius: 15px;
border-radius: 15px;
Border-Radius con doppio valore
La proprietà border-radius con doppio valore assegna valori differenti tra l’angolo orizzontale e quello verticale:
-moz-border-radius: 15px 50px;
-moz-border-radius: 50px 15px;
-moz-border-radius: 200px 30px;
Border-Radius con angolazione personalizzata
La proprietà border-radius permette anche di assegnare ad ogni angolo un’arrotondamento personalizzato:
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
Strumenti utili
A questo riguardo vi segnalo Border Radius, sito realizzato con l’unico scopo di semplificare la vita a chi vuole realizzare un box con la proprietà radius: restituisce l’anteprima e il codice CSS da inserire.
Prossimamente verrà tratta un’altra interessante proprietà dei CSS3
Ciro
20 Dicembre 2010, 14:28
Molto bene 😉
Ciro
21 Dicembre 2010, 14:41
Grande Articolo 😉
Simone Forti
21 Dicembre 2010, 19:29
Grazie Ciro! Questo è solo il primo della lunga serie sui CSS3, ogni mese parlerò di nuovo strumento introdotto nella versione 3 dei css
Ci leggiamo 😉
Ximi
8 Giugno 2011, 13:18
Ciao Simone, sei troppo forte! Chiaro e preciso… Ho anch’io un blog di chicche come te e volevo chiederti se potevo usare questo codice in un mio post, citandoti naturalmente…! Fammi sapere e complimenti!
A presto, Ximi
Simone Forti
8 Giugno 2011, 21:25
@Ximi: Grazie mille, troppo gentile! Puoi utilizzare il codice css cambiando però i valori e le posizioni, il testo sarebbe meglio lo scrivessi a parole tue per 2 motivi:
1) Etica professionale
2) Per non incorrere in penalizzazioni di Google a causa del contenuto duplicato
Sarei, comunque, bel lieto di essere citato nel tuo articolo, fammi sapere appena è pronto.
ximi
9 Giugno 2011, 15:26
Ciao, be’ certo, sono d’accordo con te, era scontato! Ma fai bene a ribadirlo. Io non sopporto gli scopiazzatori impazziti e guarda che me ne sono capitate di tutti i colori!!!
Metto sempre le citazioni e chiedo l’autorizzazione per tutorial più complessi…
E poi mi piace dare visibilità a chi mi colpisce!
Mentre aspettavo la tua risposta ho provato il codice direttamente in html, ma non riesco a rendere visibili gli effetti… Sai dirmi che tag precisa devo usare!?!
Per l’articolo ti faccio sapere.
E grazie per la cortesia… Ximi
Simone Forti
9 Giugno 2011, 15:38
@Ximi: ti ho inviato un’email alla tua casella elettronica.
Come creare box con bordi arrotondati - codice e generatori on line - Blogghidee
28 Dicembre 2012, 17:01
[…] per avere dettagli sul codice per ogni tipo di arrotondamento, potete leggere l’articolo di Simone, con il quale ho avuto un interessante scambio di opinioni, ma ve lo suggerisco perché […]