Border-radius per arrotondare i bordi con i css
I border-radius è diventata una proprietà molto utilizzata, soprattutto con l’avvento di elementi dell’interfaccia totalmente arrotondati e con linee sempre più curvee
Dopo molto tempo che non parlo delle proprietà css riguardanti i box html, che sono proprietà importanti per rendere più bvello graficamente un’elemento.
Nel primo anno di questo blog, ho fatto articoli su come gestire le ombre di un box, su come lavorare con i gradienti per creare colori di sfondo sfumati.
Ma poi, attratto anche dal numero di lettori, mi sono orientato su molti articoli sul font e su come gstirli attraversio i css.
Questo mi ha distolto un pò da altre proprietà css, comunque importanti e molto utilizzate.
In questo articolo, parlerò infatti della proprietà css border-radius.
Cos’è il border-radius?
Prima di partire nello spiegare come utilizzare questa proprietà..E’ giusto capire bene cosa è e cosa permette di fare.
Il border-radius è una proprietà css che permette di gestire l’arrotondamento dei bordi di un’elemento html.
Rendendolo più arrotondato, e creare degli elementi meno stondati e più gradevoli all’occhio.
Come vedremo nelle prossime righe, pare una proprietà molto limitata ma in realtà non è proprio così.
Perchè possiamo gestire tutti gli angoli dei bordi di un’elemento, oppure gestirli singolarmente, con pochissime righe css.
Qualche anno fa, prima che venissero introdotti design trends come la grafica flat, questa era un proprietà non molto utilizzata.
Le grafiche erano molto pesanti, e l’utilizzo di forme dalle linee sinuose ed eleganti era parecchio limitato.
Invece con l’avvento di questa grafica molto piatta, si sono cominciati a intravedere sempre bottoni e call to action dai bordi arrotondati, oppure elementi squadrati che all’hover del mouse diventanopiù arrotondati.
Adesso, con l’introduzione di altri design trend, si sta un pò ritornando allo scheumorfismo, con elementi dell’interfaccia più squadrati.
Detto quresto, il border-radius è comunque una proprietà utile per i designer che voglio migliorare i dettagli delle proprie grafiche.
Da dove cominciare?
Cominciare ad utilizzare la proprietà border-radius è molto semplice.
Bisogna prima inserire un’elemento nel file html, per poi andarlo a personalizzare nel file css.quindi comincio inserendo un div nel mio file html e poi andrò successivamente a lavorare con i css.
Ho inserito il mio div, dandogli una classe dal nome box-with-radius, a scanso di equivoci, ora bisogna aprire il file css e determinare il valore di arrotondamento del bordo.
.box-width-radius {
border:solid 1px grey;
height:100px;
width:100px;
margin:50px auto;
}
Qui ho dato una larghezza e una’altezza al div, e ho deciso dare un colore al bordo per renderlo visibile e far vedere come lavora questa proprietà, infine ho centrato orizzontalmente il mio elemento .
Ora è arrivato il momento di inserire la proprietà border-radius:
.box-width-radius {
border:solid 1px grey;
border-radius:10px;
height:100px;
width:100px;
margin:50px auto;
}
Con una riga di css, ho determinato che i 4 angoli del mio box avrà un’arrotondamento di 10px, quindi molto lieve.
Qui ho scelto di dare un’unico valore per tutti e 4 angoli del mio box, ma si può fare anche di più, questo è un’esempio molto semplice ed elementare per far vedere come lavora il border-radius.
Come gestire più angoli diversamente
Infatti, se volessimo avere degli angoli arrotondati, tutti diversamente, si può lavorare sempre con questa proprietà.
La differenza è che dobbiamo aggiungere 4 valori al border-radius, come nell’esempio.
.box-width-radius {
border:solid 1px grey;
border-radius:5px 10px 5px 15px;
height:100px;
width:100px;
margin:50px auto;
}
Nell’esempio qui sopra, ho inserito 4 valori che stanno a indicare il raggio di smussamento dei nostri 4 angoli del div html:
- Il primo valore di 5px è per l’angolo in alto a sinistra
- Il secondo valore di 10px è per l’angolo in alto a destra
- il terzo valore di 5px per l’angolo in basso a destra
- Il quarto valore è per l’angolo in basso a sinistra
Come si può notare, si determina il valore di ogni angolo partendo dal lato in alto a sinistra del nostro box, per poi proseguire in ordire orario.
Ora il nostro box ha il lato in basso a sinistra che ha il valore più alto di tutti e allora decido di metterlo uguale all’angolo in alto a destra.
.box-width-radius {
border:solid 1px grey;
border-radius:5px 10px 5px 10px;
height:100px;
width:100px;
margin:50px auto;
}
L’ultima alternativa è che si può lavorare con due valori, per determinare il border-radius:
.box-width-radius {
border:solid 1px grey;
border-radius:5px 10px;
height:100px;
width:100px;
margin:50px auto;
}
In questo caso, il primo valore lavorare sull’angolo in alto a sinistra e sull’angolo in basso a destra.
Invece il secondo valore vale per l’angolo in alto a destra e l’angolo in basso a sinistra.
Si può lavorare bene anche con le animazioni
Tralasciando il primo esempio, con il border-radius si può lavorare anche in ottica di animazioni e transizioni.
Infatti, vi sarà capitato sicuramente di vedere dei bottoni html squadrati, che all’hover del mouse dell’utente diventano arrotondati.
Questo è un tipico esempio di un’animazione che si può realizzare con il border-radius.
Partiamo subito inserendo il nostro bottone nel file html.
Dopo aver aperto il file html, rimosso il div dell’esempio precedente e inserito un bottone con classe ‘button’, lavoriamo con il file css:
.button {
background-color:darkgrey;
color:white;
padding:5px 10px;
}
Nelle righe di codice qui sopra, ho dato un’aspetto al mio bottone, dandogli un sfondo grigio ed un colore del font, binco, e dandogli un padding (margine interno) che mi permette di avere un bottone dalla forma rettangolare.
Ora andiamo a lavorare con l’:hover css per realizzare la nostra animazione:
.button {
background-color:darkgrey;
color:white;
padding:5px 10px;
}
.button:hover {
border-radius:15px;
}
Inserendo la sconda porzione riguardante l’effeto in hover, avremo un bottone che, quando il mouse si muoverà su di esso, avrà gli angoli arrotondati di 15px.
Ma l’animazione risulta poco fluida, quindi lavoreremo con le transitions css, inserendo una transizione che dura un 1s su tutte le proprietà del bottone:
.button {
background-color:darkgrey;
color:white;
padding:5px 10px;
transition: 1s all;
}
.button:hover {
border-radius:15px;
}
La transizione non l’ho inserita nella parte di codice dell’hover, così facendo avremo un’animazione fluida sia in entrata e si in uscita, cioè quando l’utente avrà appena spostato il cursore del mouse distante dal bottone.
La conclusione
In questo articolo, ho fatto una breve introduzione su come arrotondare i nostri elementi dell’interfaccia html.
Con due-tre esempi ho fatto una panoramica, per cominciare ad utilizzare questa proprietà.
C’è da dire che il web design sta cominciando a ritornare ad avere, come trends, le forme più squadrate senza angoli arrotondati.
Comunque si continuano, ancora, a vedere bottoni e altri elementi html con i bordi più arrotondati.
