Come creare CSS per bordi arrotondati, gradienti e ombreggiature.

Come generare dei fogli di stile per gradienti, texture, bordi arrotondati e ombreggiatura con CSS Matic - The Ultimate CSS Tool.

Nel precedente articolo abbiamo visto come creare dei fogli di stile per gradienti senza usare strumenti di grafica ma utilizzando l'estensione ColorZilla per Chrome e Firefox. I disegnatori web sono soliti creare, oltre che con le sfumature di colore, anche degli elementi con bordi arrotondati o con ombreggiature. Ci sono dei tool online che agevolano questo compito inserendo semplicemente i parametri per ottenere il codice già pronto e funzionante con tutti i browser più recenti. Un esempio è lo strumento Border Radius che genera il codice a partire dai raggi di curvatura dei vari angoli che possono anche essere tutti diversi.

CSS Matic è un tool più evoluto che ci consente di generare codici per gradienti, come ColorZilla, per bordi arrotondati (border radius), per texture e per ombreggiature (box shadow). Si clicca su uno dei quattro tool presenti in Homepage per iniziare

   

Lo strumento per il gradiente è molto simile a quello di ColorZilla mentre Noise Texture serve per creare una trama che poi può essere scaricata in formato PNG. In Box Shadow dobbiamo impostare i parametri della lunghezza orizzontale e verticale dell'ombreggiatura, il Blur e lo Spread Radius, il colore del box e quello dell'ombra. Dopo aver scelto il livello di opacità dell'ombra si copia il codice

Vediamo più in dettaglio come utilizzare lo strumento per la creazione dei bordi arrotondati. Si può scegliere di impostare lo stesso raggio di curvatura per tutti gli angoli oppure di metterlo diverso per ciascuno di essi. Gli altri parametri sono la larghezza, lo stile e il colore del bordo

Si va su Copy Text per ottenere il codice che può essere inserito in un modello, in un articolo o in un widget. A titolo di esempio ecco come potrebbe essere usato un tale CSS

<style>
#contenitore {
width:250px;
height:150px;
background-color:#e7a61a;
color:#003366;
font-size:20px;
padding:8px;
CODICE OTTENUTO DA CSS MATIC
}
</style>
<div id="contenitore">Testo inserito in un rettangolo con angoli arrotondati di raggio 30 pixel, con caratteri da 20 pixel e colore #003366.</div>

dove i parametri in viola possono essere personalizzati e dove è stato inserito il codice per i bordi arrotondati ottenuto da CSS Matic. Il risultato visivo è il seguente

Testo inserito in un rettangolo con angoli arrotondati di raggio 30 pixel, con caratteri da 20 pixel e colore #003366.

In questo esempio si possono inserire anche altre righe che riguardino altri parametri.