Gestire i bordi

Bordi, padding e margini vanno a costituire il cosiddetto "Box Model" delle pagine HTML, ovvero la struttura di base dei più comuni elementi di blocco, come div, header, main, article, section, footer, e cosi via, che è possibile stilizzare attraverso il CSS. Tramite w3.css è possibile impostare e personalizzare tutte e 3 queste proprietà nella ormai nota modalità minimale.

In questa lezione vedremo le classi messe a disposizione da w3.css per la gestione dei bordi.

I bordi

I bordi rappresentano la caratteristica più esterna del Box Model. Abbiamo già visto in precedenza che per impostare un bordo ad un elemento, dobbiamo usare le classi del gruppo "w3-border". La classe generica in questo gruppo è infatti la classe w3-border, che imposta un bordo completo all'elemento utilizzando la seguente riga di codice CSS:

1px solid #ccc

Dunque, per impostare un bordo di default (che sarà possibile personalizzare nei suoi vari aspetti), utilizzeremo il seguente codice:

<div class="w3-panel w3-border">
	<p>Un elemento con un bordo di default.</p>
</div>

Vediamo ora come possibile personalizzare ulteriormente i bordi. Con w3.css possiamo impostare il lato (o i lati) su cui applicare il bordo, il colore, la dimensione (le cosiddette "barre"), il reset, l'hovering ed infine la curvatura.

Lato

Per decidere a quale lato applicare il bordo, abbiamo a disposizione le seguenti classi:

• w3-border-top: applica un bordo al lato superiore dell'elemento
• w3-border-right: applica un bordo al lato destro dell'elemento
• w3-border-bottom: applica un bordo al lato inferiore dell'elemento
• w3-border-left: applica un bordo al lato sinistro dell'elemento

Combinando queste classi, possiamo scegliere manualmente quali lati impostare. Ad esempio:

<div class="w3-panel w3-border-left">
    <p>Ho un bordo sul lato sinistro.</p>
  </div>
  <div class="w3-panel w3-border-right">
    <p>Ho un bordo sul lato destro.</p>
  </div>
  <div class="w3-panel w3-border-top w3-border-bottom">
    <p>Ho un bordo sul lato superiore ed un bordo sul lato inferiore.</p>
  </div>

Colore

Per impostare il colore dei bordi, abbiamo la classe w3-border-[color-name], dove [color-name] è una keyword che punta ad un valore di colore CSS. Anche qui, possiamo creare innumerevoli combinazioni:

<div class="w3-panel w3-border w3-border-red">
    <p>Ho i bordi rossi.</p>
  </div>
  <div class="w3-panel w3-border-left w3-border-blue">
    <p>Ho un bordo sinistro di colore blu.</p>
  </div>
  <div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
    <p>Ho il bordo superiore ed il bordo inferiore di colore verde.</p>
  </div>
  <div class="w3-panel w3-border-left w3-pale-red w3-border-red">
    <p>Ho un bordo sinistro di colore rosso ed un colore di sfondo rosso pallido.</p>
  </div>

È importante notare che i colori hanno efficacia visiva solo se il bordo viene impostato, manualmente, oppure tramite la classe w3-border. A causa della natura del motore CSS, inoltre, le classi possono essere impostate in ordine casuale, anche se è buona norma seguire una sintassi comune nei propri progetti.

Hovering

Un'altra caratteristica che è possibile produrre tramite w3.css è l'effetto di cambio del colore dei bordi al passare del mouse sopra l'elemento ed il ritorno al suo colore di base quando il mouse viene spostato dallo stesso (hovering). Per fare ciò abbiamo la classe w3-hover-border-[color-name], dove [color-name] identifica sempre il nostro colore CSS. Vediamo qualche esempio di utilizzo:

<div class="w3-panel w3-border w3-hover-border-red">
  <p>Bordo default che diventa rosso al passare del mouse</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
  <p>Bordo rosso che diventa verde al passare del mouse</p>
</div>

Dimensioni

Come abbiamo visto, di default le dimensioni impostate da w3-border corrispondono a 1px. Attravero le seguenti 4 classi, possiamo impostare per ogni lato un bordo più "denso", della dimensione di 6px:

• w3-topbar: imposta un bordo di 6px al lato superiore dell'elemento
• w3-rightbar: imposta un bordo di 6px al lato destro dell'elemento
• w3-leftbar: imposta un bordo di 6px al lato sinistro dell'elemento
• w3-bottombar: imposta un bordo di 6px al lato inferiore dell'elemento

Tutte le combinazioni sono possibili:

<div class="w3-panel w3-leftbar">
  <p>Ho un bordo denso sul lato sinistro.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
  <p>Ho un bordo denso sul lato sinistro di colore blu.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
  <p>Ho un bordo denso sul lato sinistro di colore blu ed uno sfondo blu pallido.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
  <p>Ho un bordo denso sul lato superiore ed un bordo denso sul lato inferiore, entrambi di colore rosso, ed uno sfondo di colore rosso pallido.</p>
</div>

Reset

Contrariamente all'aumento delle dimensioni del bordo, la classe w3-border-0 permette di rimuovere il bordo da qualsasi elemento HTML:

<div class="w3-border-0">
  <p>Un elemento senza bordo.</p>
</div>

Oltre che per ovvi scenari di design, la classe w3-border-0 è utile anche per effetti Javascript che influiscono sui bordi degli elementi.

Arrotondamento

Infine, vediamo l'ultima delle caratteristiche impostabili con w3.css, disponbile grazie alle nuove specifiche del CSS3: l'arrotondamento dei bordi. Questo effetto è in realtà indipendente dalla presenza dei bordi sull'elemento, dato che incide direttamente sugli angoli dell'elemento stesso. Tuttavia, combinando la classe w3-round-[dimensione], dove [dimensione] è un valore che indica la curvatura dell'angolo, è possibile produrre effetti interessanti che agiscono sui bordi, indipendentemente dalla presenza o meno di uno sfondo:

<div class="w3-panel w3-border">
  <p>Bordi non arrotondati.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
  <p>Bordi arrotondati lievemente.</p>
</div>
<div class="w3-panel w3-border w3-round">
  <p>Bordi arrotondati di default.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
  <p>Bordi arrotondati con valore large.</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
  <p>Bordi arrotondati con valore xlarge.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
  <p>Bordi arrotondati con valore xxlarge.</p>
</div>

Vedremo nell'apposita lezione dedicata all'arrotondamento tutti i valori impostabili con la classe w3-round. Per avere efficacia sui bordi, è ovviamente necessario abbinare questa classe alla classe w3-border.