A partire da questo tutorial voglio parlarvi delle caratteristiche principali dei CSS3 e delle sue proprietà.
In quest’occasione parliamo di border-radius ovvero dell’applicazione dei bordi arrotondati ad un div utilizzando esclusivamente i fogli di stile.
A buona parte di voi sembrerà un tutorial obsoleto (in fondo questo tipo di proprietà esistono da diversi anni) ma non avete idea di quante persone si avvicinino soltanto adesso alle basi dei CSS3.
Creiamo un semplice box
Partiamo scrivendo l’HTML necessario per ottenere un div con una semplice scritta al suo interno, questo è il codice:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bordi arrotondati</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box">Ciao, Mondo!</div> </body> </html>
Come potete vedere, si tratta di una basilare pagina di HTML alla quale ho già collegato un foglio di stile.
In questo modo, se apriamo il file nel browser, visualizziamo una scritta in alto a sinistra, deludente, vero?
Sappiamo, comunque, che oltre alla scritta esiste il box che lo contiene, non lo vediamo perché non ha nessun colore.
Applichiamo allora alcune regole CSS per visualizzarlo:
/* Bordi arrotondati */
.box {
background-color: #2ecc71;
color: #fff;
}
Finalmente vediamo qualcosa, un box di colore verde con una scritta bianca, è giunto il momento di perfezionarlo aggiungendo poche altre righe di codice:
.box {
width: 400px;
height: 400px;
background-color: #2ecc71;
margin: 0 auto;
margin-top: 200px;
line-height: 400px;
text-align: center;
color: #fff;
font-size: 40px;
}
Adesso il nostro box è più interessante, è centrato nella pagina ed ha delle dimensioni precise.
Ma veniamo all’argomento specifico del tutorial, ovvero gli angoli arrotondati.
La proprietà che dobbiamo applicare si chiama border-radius e definisce il raggio che vogliamo dare agli angoli del nostro box, più alto è il valore più arrotondato sarà l’angolo.
Proviamo alcuni esempi:
border-radius: 4px;
Se applichiamo questa regola otteniamo degli angoli lievemente arrotondati.
border-radius: 12px;
Adesso il nostro box ha cambiato forma, gli angoli sono decisamente arrotondati.
Ma una delle applicazioni più interessanti è la creazione del cerchio, basterà dare al border-radius la metà del valore del box ed otterremo un cerchio perfetto:
border-radius: 200px;
Da notare che aumentando ulteriormente il border-radius non noteremo alcuna differenza in quanto abbiamo raggiunto il massimo dell’arrotondamento.
Spero di essere stato chiaro e utile, aspetto il vostro feedback per capire se sto andando nella direzione giusta.
N.B.: Il border-radius è applicabile serenamente per essere visualizzato con tutti i browser, ad esclusione delle versioni di Internet Explorer precedenti alla 9.0.
Alla prossima 🙂
Scarica i files del tutorial
