Abbiamo già visto in altre lezioni come sia possibile impostare un bordo e come rendere gli angoli arrotondati. In questa lezione andremo a vedere alcuni concetti avanzati per costruire angoli arrotondati e anche come sia possibile utilizzare le nostre immagini come dei bordi.
L’ultima volta che abbiamo visto la proprietà border-radius avevamo questi valori:
#angoli-arrotondati { border-radius: 15px 45px 25px 70px } In questo modo siamo in grado di impostare il raggio dei vari angoli partendo da quello in alto a sinistra per arrivare a quello in basso a sinistra. Questo ci permette di creare delle curve molto lineari ma come potremmo fare se volessimo personalizzare il tipo di curva realizzato?
Anche questa volta gli sviluppatori CSS ci hanno fornito la soluzione! Tutto quello che dovremmo è utilizzare una delle seguenti sintassi:
#arrotondati { /* Applico la regola ad un solo angolo */ border-top-left-radius: 20px 40px; /* Applico la regola a tutti gli angoli */ border-radius: 20px 40px / 5px 15px 40px 60px; } Come possiamo notare gli approcci principali sono due, il primo definisce l’inserimento di due valori per ogni angolo oppure possiamo decidere di usare soltanto la proprietà border-radius e applicare prima i valori orizzontali e successivamente quelli verticali.
Ma perché sto parlando degli assi orizzontali e verticali? Semplicemente perché, come vediamo dall’immagine sottostante, il primo valore che viene accettato viene applicato raggio orizzontale del nostro angolo mentre il secondo si riferisce al raggio verticale.
Lo stesso discorso di applica con la proprietà generale border-radius, che rispetta la sintassi generale, ma serve un backslash / per separare i valori orizzontali da quelli verticali.
Oltre a questa novità voglio introdurvi velocemente alla possibilità di utilizzare delle immagini per i propri bordi. La magia è svolta dalla proprietà border-image e questa è la sua sintassi:
#immagine { border-image: url('border.jpg') 2; Veramente semplice giusto? Tutto quello che dobbiamo fare è specificare dove si trova l’immagine per il nostro bordo e specificare la distanza (in pixel) necessaria per costruire il bordo.
Se volete uno strumento semplice per creare le vostre cornici provate ad utilizzare il Border Image Generator, strumento gratuito molto utile ed interessante per scoprire la sintassi di questa regola.