CSS3: Il potere nascosto del border-radius
This entry was posted on February 5th, 2010 and is filed under CSS.
Circa un mese fa mi sono occupato di un tutorial per realizzare triangoli con solo CSS. L’articolo di oggi è una sorta di continuazione che ci consente di realizzare effetti molto carini utilizzando la proprietà border-radius.
L’autore dell’articolo originale è Liam McCabe di CreativiyDen. Vediamo nel dettaglio gli effetti che si possono realizzare con il border-radius.
Circle
Un effetto davvero molto carino consiste nel realizzare dei cerchi con puro codice CSS. Il codice necessario per realizzare un cerchio con sfondo rosso è il seguente:
#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
Il risultato che otterremo è il seguente:
Possiamo anche giocare con il riempimento e il tipo di bordo del cerchio, come nel seguente esempio:
#circle {
width: 200px;
height: 200px;
border: 3px solid red;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
Semi-Cerchi e Quarti di Cerchi
Non solo cerchi completi ma anche frammenti di cerchi è possibile realizzare. Ad esempio un semi-cerchio è possibile realizzarlo con il seguente codice:
#semicircle {
width: 100px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 200px;
-moz-border-radius: 200px 0 0 200px;
}
Il risultato sarà qualcosa di simile:
Per realizzare un quarto di cerchio, invece, abbiamo bisogno di un codice come il seguente:
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
-moz-border-radius: 200px 0 0 0;
}
Questo il risultato:
Una pagina contenente tutti gli esempi è disponibile al seguente indirizzo.
Effetti avanzati
Possiamo anche complicare le cose per ottenere effetti davvero molto interessanti che necessitano di pochissime righe di codice. Con un pò di creatività possiamo realizzare degli effetti come quelli delle seguenti immagini:
Via | CreativiyDen
Benvenuto! Mi chiamo
February 10, 2010 at 4:04 pm
Ciao
due cose: prima di tutto se oltre alle estensioni proprietarie inserisci anche quella standard (border-radius) l’effetto verrà reso anche sull’imminente Opera 10.5
Poi una domanda: che codice si dovrebbe usare per ottenere l’effetto del penultimo esempio (la semiluna rossa su sfondo grigio)? …. probabilmente è una cavolata ma non ci arrivo…
Ciao e grazie
February 10, 2010 at 9:20 pm
Ciao Engelium,
scusa il ritardo ma non avevo internet oggi.
Innanzitutto grazie per la segnalazione, errore di distrazione!
Per quanto riguarda il secondo punto è facilissimo. Sono due div sovrapposti l’un l’altro, uno di colore rosso, l’altro del colore di background. Con il position: relative fai tutto!
February 10, 2010 at 9:54 pm
Argh! Lo sapevo che era una cavolata
…. ed io che stavo ancora a pensare ad un qualche improbabile valore per il border-style O_o
Grazie mille e a presto
February 10, 2010 at 10:48 pm
Eheheh, errore mio che mi sono limitato a mettere le immagini senza approfondire.
A presto!