Immagini

Molte classi di w3.css permettono di applicare effetti di vario tipo sulle immagini. Ad esempio, possiamo cambiare la forma standard rettangolare delle stesse, curvandola (classe w3-round) o arrotondandola (classe w3-circle), nonché aggiungere bordi (classe w3-border), modificare l'opacità, i colori e molto altro. In questa lezione vedremo come fare.

Curvatura ed arrotondamento

Per curvare un'immagine, sfruttiamo la già citata classe w3-round:

<img src="myimage.jpg" class="w3-round" alt="my image">

Per arrotondarla, invece, sfrutteremo la classe w3-circle:

<img src="myimage.jpg" class="w3-circle" alt="my image">

Bordatura

Possiamo applicare un bordo sottile ad un'immagine mediante la classe w3-border:

<img src="myimage.jpg" class="w3-border" alt="my image">

Cards

Con w3.css, possiamo trasformare un'immagine in una card:

<div class="w3-card-4">
<img src="myimage.png" alt="My Image">
</div>

Le "card" sono elementi a cui è stata impostata, oltre alle caratteristiche standard di w3.css, anche un'ombreggiatura di dimensione variabile. È una soluzione interessante per produrre schede, pannelli, messaggi di errore ed alert, e cosi via. In combinazione con le immagini, il risultato è particolarmente accattivante.

Vi sono 3 classi per lavorare con le card:

• w3-card: elemento container con ombreggiatura pari a 2px
• w3-card-2: elemento container con ombreggiatura pari a 2px (alias di w3-card)
• w3-card-4: elemento container con ombreggiatura pari a 4px

Si noti che le classi w3-card vanno applicate all'elemento genitore/container, mentre al suo interno è possibile includere una moltitudine di elementi HTML figli, tra cui, ovviamente, le immagini.

Opacity

Per lavorare con l'opacità, abbiamo le classi del gruppo w3-opacity. Vediamole nel dettaglio:

• w3-opacity: imposta un'opacità/trasparenza di 0.6 ad un elemento HTML o ad un testo
• w3-opacity-min: imposta un'opacità/trasparenza di 0.75 ad un elemento HTML o ad un testo
• w3-opacity-max: imposta un'opacità/trasparenza di 0.25 ad un elemento HTML o ad un testo
• w3-opacity-off: imposta un'opacità/trasparenza di 1 ad un elemento HTML o ad un testo. Rende l'elemento completamente visibile

Minore è il valore della proprietà CSS opacity, meno l'elemento sarà visibile.

<p>Normale (100% opacity):</p>
<img src="img_forest.jpg" alt="Forest" style="width:150px">
<p>w3-opacity-min (75% opacity):</p>
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min" style="width:150px">
<p>w3-opacity (60% opacity):</p>
<img src="img_forest.jpg" alt="Forest" class="w3-opacity" style="width:150px">
<p>w3-opacity-max (25% opacity):</p>
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max" style="width:150px">

Scala di grigi

Analogamente, per ridurre la saturazione di un'immagine, fino ad arrivare alla completa scala di grigi (greyscale), sfruttiamo le classi del gruppo w3-greyscale. Più il valore aumenta, più l'immagine (o l'elemento HTML) sarà vicina alla scala di grigi:

• w3-greyscale-min: aggiunge un filtro di scala di grigi del 50% all'elemento HTML
• w3-greyscale: aggiunge un filtro di scala di grigi del 75% all'elemento HTML
• w3-greyscale-max: aggiunge un filtro di scala di grigi del 100% all'elemento HTML

<p>Normale:</p>
<img src="img_workshop.jpg" alt="Snow" style="width:150px">
<p>w3-grayscale-min:</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-grayscale-min" style="width:150px">
<p>w3-grayscale:</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-grayscale" style="width:150px">
<p>w3-grayscale-max (black and white):</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-grayscale-max" style="width:150px">

Sepia

Le classi del gruppo w3-sepia funzionano in modo equivalente, ma lavorano con il filtro CSS sepia, che rende l'immagine o l'elemento HTML in una gradazione specifica:

• w3-sepia-min: aggiunge un filtro sepia del 50% all'elemento HTML
• w3-sepia: aggiunge un filtro sepia del 75% all'elemento HTML
• w3-sepia-max: aggiunge un filtro sepia del 100% all'elemento HTML

<p>Normale:</p>
<img src="img_workshop.jpg" alt="Snow" style="width:150px">
<p>w3-sepia-min:</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-sepia-min" style="width:150px">
<p>w3-sepia:</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-sepia" style="width:150px">
<p>w3-sepia-max:</p>
<img src="img_workshop.jpg" alt="Snow" class="w3-sepia-max" style="width:150px">

Hovering

Non può mancare, anche in relazione alle immagini, l'effetto di hovering. Esso consiste nell'applicare uno dei filtri elencati in precedenza (opacity, greyscale e sepia) ad un elemento HTML quando l'utente passa il mouse sopra al suddetto elemento. Vediamo le classi offerte da w3.css:

• w3-hover-opacity: applica un'opacità/trasparenza di 0.6 all'elemento HTML al passare del mouse
• w3-hover-opacity-off: applica un'opacità/trasparenza di 1 (rimuove l'opacità) all'elemento HTML al passare del mouse
• w3-hover-greyscale: applica il filtro greyscale al 100% (bianco e nero) all'elemento HTML al passare del mouse
• w3-hover-sepia: applica il filtro sepia all'elemento HTML al passare del mouse
• w3-hover-none: rimuove gli effetti elencati

<p>w3-hover-opacity:</p>
<img src="img_workshop.jpg" class="w3-hover-opacity" style="width:150px">
<p>w3-hover-grayscale:</p>
<img src="img_workshop.jpg" class="w3-hover-grayscale" style="width:150px">
<p>w3-hover-sepia:</p>
<img src="img_workshop.jpg" class="w3-hover-sepia" style="width:150px">

Nota: la classe w3-hover-opacity-off è utilizzata per creare l'effetto contrario: al passare del mouse un elemento passa dall'essere opaco (a livello variabile) ad essere pienamente visibile. Ecco uno snippet che mostra i 2 effetti opposti:

<img src="img_snowtops.jpg" class="w3-hover-opacity" alt="Norway" style="width:50%">
<img src="img_snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Norway" style="width:50%">

Immagini responsive

w3.css è un framework CSS che pone estrema attenzione alla responsività in ogni suo aspetto. Per fare in modo che un'immagine sia responsive, possiamo utilizzare la classe w3-image. In questo modo, l'immagine scalerà di dimensioni quando l'utente ridimensiona la finestra del browser oppure utilizza un dispositivo di dimensioni inferiori, senza distruggere il layout della pagina, ma non aumenterà le sue dimensioni all'ingrandimento della pagina o del layout stesso:

<img src="img_lights.jpg" alt="Lights" class="w3-image" width="600" height="400">

Per verificare il funzionamento dell'applicazione, proviamo ad includere il codice HTML seguente (insieme al CSS di w3.css ed al link appropriato alla nostra immagine) ed a ridimensionare la finestra del browser.

Se invece vogliamo che l'immagine scali sia al ridimensionamento sia all'ingrandimento della pagina, basta impostare la proprietà CSS width al valore 100%:

<img src="img_lights.jpg" alt="Lights" style="width:100%">

Infine, se vogliamo che l'immagine non superi una certa dimensione all'ingrandimento della pagina, mantenendo le caratteristiche precedenti, aggiungiamo la proprietà CSS max-width, impostandola al valore di grandezza massima desiderato:

<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">

Con le immagini è possibile creare una moltitudine di effetti interessanti che vedremo nel corso delle successive lezioni, quando analizzeremo le possibilità più avanzate di w3.css.