I colori in w3.css

I colori rappresentano una delle caratteristiche più importanti nel contesto di lavori artistici, e la parte front-end di un'applicazione Web non costituisce un'eccezione. Tramite i CSS è possibile dare volti completamente differenti all'aspetto delle pagine HTML a seconda della scala di colore che scegliamo di utilizzare. Dato che sono utilizzati in modo intensivo, w3.css fornisce un'ampia collezione di classi per lavorare con i colori in maniera molto efficace ed immediata:

• le classi per il colore di sfondo
• le classi per il colore del testo
• le classi per il colore dei bordi
• le classi per il colore di hovering

Vediamole nel dettaglio.

Colore di sfondo

La sintassi delle classi utili ad impostare i colori di sfondo è quella più semplice: la sua struttura necessita del solo prefisso w3- seguito dal namespace che indica il colore desiderato, dunque w3-colorname. Ad esempio, se vogliamo impostare 3 colori differenti agli sfondi di altrettanti elementi div, agiremo nel seguente modo:

<div class="w3-green mydiv">
<h2>Verde</h2>
</div>

<div class="w3-blue mydiv">
<h2>Blu</h2>
</div>

<div class="w3-red mydiv">
<h2>Rosso</h2>
</div>

Come possiamo vedere nella demo allegata a questa lezione, il primo div avrà uno sfondo verde, il secondo uno sfondo blu ed il terzo uno sfondo rosso. Utilizzando le classi w3-colorname, anche il colore del testo verrà automaticamente modificato per corrispondere alla scelta migliore, in termini di usabilità, da affiancare a quello dello sfondo. Sarà ovviamente possibile sovrascrivere questa caratteristica di default, utilizzando le classi che impostano specificamente il colore del testo, che vedremo nel paragrafo successivo.

Come abbiamo dichiarato nelle precedenti lezioni, i namespace della scala di default di w3.css puntano a colori differenti dagli standard comuni, quindi ad esempio la classe "red" non definisce il classico colore rosso dato dal valore "#ff0000", ma avrà invece un valore coerente con lo schema di w3.css, che si ispira come abbiamo visto a Material Design Colors, per risultati più in linea con le tendenze moderne.

Si noti, infine, che le classi w3-gray e w3-grey sono alias ed impostano lo stesso identico colore.

Colore del testo

Per utilizzare le classi dedicate ai colori del testo, dopo il prefisso w3- dovremo aggiungere il segmento text- seguito dal namespace del colore desiderato, dunque w3-text-colorname. Ad esempio, se vogliamo impostare 3 colori differenti al testo di 3 paragrafi differenti, agiremo nel seguente modo:

<div class="mydiv">
<p class="w3-text-green">Sono verde!</p>
</div>
<div class="mydiv">
<p class="w3-text-blue">Sono blu!</p>
</div>
<div class="mydiv">
<p class="w3-text-red">Sono rosso!</p>
</div>

Qui possiamo vedere l'esempio in azione. Se utilizziamo una classe che imposta un colore di sfondo, combinata con una classe che imposta il colore del testo, potremo ottenere un effetto totalmente personalizzato, quale ad esempio:

<div class="mydiv w3-blue">
<p class="w3-text-red">Sono verde!</p>
</div>

Colore dei bordi

Per utilizzare invece le classi dedicate ai colori del bordi, dopo il prefisso w3- dovremo aggiungere il segmento border- seguito dal namespace del colore desiderato, dunque w3-border-colorname, in aggiunta alla classe w3-border utile ad impostare una dimensione ed uno stile di default per la proprietà border, e quindi necessaria per poter visualizzare il colore.

Ad esempio, se vogliamo impostare 3 colori differenti ai bordi di 3 elementi section differenti, agiremo nel seguente modo:

<section class="w3-border w3-border-green mydiv">
<h2>Bordo Verde</h2>
</section>
<section class="w3-border w3-border-blue mydiv">
<h2>Bordo Blu</h2>
</section>
<section class="w3-border w3-border-red mydiv">
<h2>Bordo Rosso</h2>
</section>

Qui una demo.

Colore di hovering

Oltre alle comuni classi per l'impostazione del colore di partenza di sfondo, testo e bordi, w3.css fornisce classi specifiche per l'impostanzione del colore al verificarsi di un evento specifico: il passaggio del mouse sopra l'elemento HTML preso in considerazione dalla classe, ovvero il cosidetto hovering. Questo tipo di effetti è molto utile, oltre che esteticamente piacevole. Viene usato praticamente in ogni layout moderno per aumentare l'usabilità di pulsanti, bottoni, link, o per creare animazioni di tipo statico.

Per impostare questo effetto, basta aggiungere tra il segmento w3- ed i segmenti che abbiamo visto in precedenza, siano essi riferiti allo sfondo, al testo o ai bordi, il segmento hover-, dunque:

• w3-hover-colorname nel caso dell'hovering sul colore di sfondo
• w3-hover-text-colorname nel caso dell'hovering sul colore del testo
• w3-hover-border-colorname nel caso dell'hovering sul colore dei bordi (in aggiunta alla classe w3-border necessaria per impostare la presenza del bordo)

Mettiamo dunque in pratica tutto ciò per creare degli effetti di hovering ad ognuna di queste caratteristiche che scatteranno quando l'utente passerà il mouse sopra gli elementi:

<div class="w3-deep-orange w3-hover-blue-gray mydiv">
Sfondo hover
</div>
<div class="mydiv">
<p class="w3-text-deep-orange w3-text-blue-gray">Testo hover</p>
</div>
<div class="w3-border w3-border-deep-orange w3-hover-border-blue-gray mydiv">
Bordo hover
</div>

Come possiamo vedere, l'effetto verrà creato secondo le aspettative previste.

Scale di colori

In tutti questi esempi abbiamo utilizzato la scala di colore di default offerta da w3.css, chiamata w3.css Material Scale. Questa collezione di classi offre decisamente molti colori standard per lavorare con i nostri layout. Tuttavia, se abbiamo la necessità o la volontà di utilizzare altre scale di colore, niente paura! w3.css offre attualmente ben 3 scale di colore aggiuntive ognuna contenente una collezione di classi dedicata.

Per utilizzarle, dovremo prima di tutto inserire l'URL al file CSS che le definisce, tramite storage locale o via servizio CDN:

/* inserimento della scala di colore CSS, localmente o tramite CDN */
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css">

e quindi aggiungere il segmento indicante il namespace del colore desiderato preceduto dal prefisso che indica la scala in uso:

<div class="w3-flat-emerald">
Scala Flat UI
</div>
<div class="w3-metro-light-green">
Scala Metro
</div>
<div class="w3-win8-lime">
Scala Windows 8
</div>

Qui la demo.

La scala w3.css Flat UI Scale, come suggerito dal nome, è in linea con i pattern di colore offerti da FlatUI Colors.

La scala w3.css Windows Metro UI, basata su Microsoft Design Language (MDL), è focalizzata principalmente sulla tipografia e sullo stile minimale.

La scala w3.css Windows 8 è invece basata sulla scala di colori offerta dell'ottava versione del sistema operativo di casa Microsoft.

Infine, ricordiamo che le classi aggiuntive impostano sia il colore di sfondo che il colore del testo in modo combinato, dunque utilizzando un'unica classe sarà possibile impostare in un colpo solo un determinato background-color e un color.

Come abbiamo potuto vedere in questa lezione, utilizzare i colori e dare un aspetto vivace alle nostre pagine HTML è un compito che diventa estremamente facile con l'ausilio di w3.css. Nelle prossime lezioni vedremo nel dettaglio gli altri singoli helper per le proprietà CSS e come questi possono essere utilizzati insieme per creare effetti completi.