Angoli arrotondati e altri effetti sui bordi in CSS3

Nella più moderna versione di Css, la 3, sono state aggiunte delle regolea al fine arricchire il visual con il foglio di stile, aumentando l'impatto grafico direttamente via codice senza l'apporto di jpg o png di sfondo e complicati ritagli. In questo articolo approfondisco tre di queste, per la gestione gestione dei bordi e dei livelli d'ombra.


Angoli Arrotondati: Border Radius

Per indicare al browser di raccordare tutti i lati di un qualsiasi rettangolo creato da un elemento html, arrotondando tutti e quattro gli angoli, specifichiamo un solo valore in pixel per la proprietà css3 border-radius. Nell'esempio uso un div appositamente colorato.

border-radius:25px;

Angoli arrotondati con 25 pixel di raggio per ognuno

Per fare in modo che solo alcuni degli angoli siano gestiti dal valore che assegnamo, diamo 4 valori alla proprietà, come si fa con il margin o il padding: partendo dal primo che sarà in alto a sinistra, seguiranno gli altri in senso orario.

border-radius:75px 0 30px 0;

Solo 2 angoli arrotondati con 75 pixel di raggio

Questi altri esempi mostrano diverse combinazioni di utilizzo e valori.

(1) border-radius:5px 5px 0 0;
(2) border-radius:0 0 10px 10px
(3) border-radius:30px;

1
2
3

È anche possibile utilizzare unità di misura in em e percentuali %.


Immagini nel bordo: Border Image

Altra potenzialità grafica per i bordi in CSS3 sono le immagini di sfondo, ripetute per tutto il contorno in aggiunta alle linee continue, puntate e tratteggiate già conosciute. La proprietà è border-image.

L'immagine utilizzata è questa ruota dentata: 

che viene automaticamente ridimensionata in base al valore che viene assegnato in border-image-width

border-image-source: url(gear.png); border-image-slice: 46; border-image-width: 22px; border-image-outset: 10px border-image-repeat: round round;

L'immagine è qui adattata per creare questo effetto al bordo.

L'immagine utilizzata nel prossimo esempio è una versione più complessa, con 8 ruote dentate diverse, organizzate in uno slice che descrive le 8 sezioni di un bordo:

con questa struttura

border-image-source: url(gear.png);
border-image-slice:20;
border-image-width:20px;
border-image-outset:0;
border-image-repeat:round;

Immagine del bordo con le 8 sezioni personalizzate (4 angoli e 4 lati)
Per maggiori esperimenti sui valori slice outset e repeat, del bordo con immagini, è possibile fare riferimento a questo tool per immagini nei bordi fornito da Mozilla

Ombra dell'elemento: Box Shadow

Ultima componente grafica spiegata è la nuova ombra dell'elemento con box-shadow, che si applica ai riquadri, non ai bordi come le precedenti regole. Si sviluppa per tutta l'ampiezza dell'elemento e viene posta sotto ad esso.

http://css3gen.com/box-shadow/

È possibile configurarne colore, sfumatura e scostamento. Una classica ombra lievemente sfumato e distanziato verso il basso si ottiene con una semplice regola a 4 valori, i primi due sono per l'offset X-Y, il terzo è il raggio di sfumatura, segue il colore.

box-shadow: 3px 3px 5px #999;

Riquadro con ombra grigia,
"scostata" di 3pixel dall'alto e da sinistra
 di sfumatura di 5pixel

L'effetto bagliore può essere creato sfruttando lo stesso principio, ma con colori chiari, una buona sfumatura e nessuna distanza.

box-shadow: 0px 0px 8px #faf7c4

Riquadro con bagliore giallo.
si estende uniformemente in tutte le direzioni.

Ulteriore possibilità è data dall'accodamento di più triplette di valori, separate dalla virgola. In questo modo gli effetti si sommano graficamente verso l'esterno, possiamo così ottenere un finto "doppio bordo" non sfumando l'ombra

box-shadow: 4px 4px 0 #0f450b,-4px -4px 0 #0f450b

Effetto "doppio bordo"
con due triplette di valori

box-shadow: 4px 4px 0 #0f450b,-4px -4px 0 #0f450b,
-4px 4px 0 #0f450b, 4px -4px 0 #0f450b

L'effetto doppio bordo con quattro "ombre"
completa anche gli altri angoli
Capito il meccanismo si può comunque usufruire di questo comodo strumento per la generazione automatica delle ombre in css3.