Oltre alle classi per la produzione di animazioni, w3.css offre anche un set di classi per la realizzazione di particolari effetti grafici. Questi si differenziano dalle animazioni perché comportano una transizione sui valori delle proprietà CSS di un elemento HTML, ma vanno invece ad applicare un effetto statico.
Tipi di effetti
Gli effetti applicabili tramite w3.css sono fondamentalmente di tre tipologie:
- opacity: l'effetto modifica l'opacità di un elemento HTML
- grayscale: l'effetto trasforma l'aspetto dell'elemento in scala di grigi
- sepia: l'effetto colora l'elemento in una tonalità tra il giallo e il marrone, tipica delle vecchie foto ingiallite e vintage
Possiamo applicare questi effetti anche a parti invertite, sfruttando le classi hover per far sì che vengano attivati al passaggio del mouse.
Vediamo tutte le classi che abbiamo a disposizione per ogni singolo effetto:
w3-opacity |
aggiunge un'opacità/trasparenza ad un elemento (opacity: 0.6) |
w3-opacity-min |
aggiunge un'opacità/trasparenza ad un elemento (opacity: 0.75) |
w3-opacity-max |
aggiunge un'opacità/trasparenza ad un elemento (opacity: 0.25) |
w3-grayscale |
aggiunge un effetto su scala di grigi ad un elemento (grayscale: 75%) |
w3-grayscale-min |
aggiunge un effetto su scala di grigi ad un elemento (grayscale: 50%) |
w3-grayscale-max |
aggiunge un effetto su scala di grigi ad un elemento (grayscale: 100%) |
w3-sepia |
aggiunge un effetto "sepia" ad un elemento (sepia: 75%) |
w3-sepia-min |
aggiunge un effetto "sepia" ad un elemento (sepia: 50%) |
w3-sepia-max |
aggiunge un effetto "sepia" ad un elemento (sepia: 100%) |
w3-hover-opacity |
aggiunge un'opacità/trasparenza ad un elemento al passaggio del mouse (opacity: 0.6) |
w3-hover-grayscale |
aggiunge un effetto su scala di grigi ad un elemento al passaggio del mouse (grayscale: 100%) |
w3-hover-sepia |
aggiunge un effetto "sepia" ad un elemento al passaggio del mouse |
Effetto "opacity"
Vediamo come applicare la trasparenza a differenti gradi sugli elementi:
<p>Normale:</p>
<img src="img_snow_wide.jpg" style="width:300px">
<p>w3-opacity-min:</p>
<img src="img_snow_wide.jpg" class="w3-opacity-min" style="width:300px">
<p>w3-opacity:</p>
<img src="img_snow_wide.jpg" class="w3-opacity" style="width:300px">
<p>w3-opacity-max:</p>
<img src="img_snow_wide.jpg" class="w3-opacity-max" style="width:300px">L'effetto è utilizzabile anche in combinazione a tutte le altre classi w3.css, ad esempio con i colori di sfondo:
<div class="w3-panel w3-red w3-opacity">
<p>Rosso coh opacity</p>
</div>
<div class="w3-panel w3-blue w3-opacity">
<p>Blu con opacity</p>
</div>
<div class="w3-panel w3-green w3-opacity">
<p>Verde con opacity</p>
</div>Effetto "grayscale"
Anche lavorando con la scala di grigi possiamo impostare l'effetto sia direttamente:
<p>Normale:</p>
<img src="img_snow_wide.jpg" alt="Snow" style="width:300px">
<p>w3-grayscale-min:</p>
<img src="img_snow_wide.jpg" alt="Snow" class="w3-grayscale-min" style="width:300px">
<p>w3-grayscale:</p>
<img src="img_snow_wide.jpg" alt="Snow" class="w3-grayscale" style="width:300px">
<p>w3-grayscale-max (black and white):</p>
<img src="img_snow_wide.jpg" alt="Fjords" class="w3-grayscale-max" style="width:300px">sia in combinazioni con altre classi w3.css, come i colori di sfondo:
<div class="w3-panel w3-red w3-grayscale">
<p>Rosso con grayscale</p>
</div>
<div class="w3-panel w3-blue w3-grayscale">
<p>Blue con grayscale</p>
</div>
<div class="w3-panel w3-green w3-grayscale">
<p>Verde con grayscale</p>
</div>Si noti che le classi w3-grayscale non sono supportate da Internet Explorer 11 e dalle precedenti versioni dello stesso software.
Effetto "sepia"
Allo stesso modo, l'effetto "sepia" è applicabile agli elementi HTML in maniera singola ed in combinazione con altre impostazioni, per ottenere gradazioni di tonalità sempre differenti:
<p>Normale:</p>
<img src="img_snow_wide.jpg" alt="Snow" style="width:300px">
<p>w3-sepia-min:</p>
<img src="img_snow_wide.jpg" alt="Snow" class="w3-sepia-min" style="width:300px">
<p>w3-sepia:</p>
<img src="img_snow_wide.jpg" alt="Snow" class="w3-sepia" style="width:300px">
<p>w3-sepia-max:</p>
<img src="img_snow_wide.jpg" alt="Snow" class="w3-sepia-max" style="width:300px">Multi effetto:
<div class="w3-panel w3-red w3-sepia">
<p>Rosso con sepia</p>
</div>
<div class="w3-panel w3-blue w3-sepia">
<p>Blu con sepia</p>
</div>
<div class="w3-panel w3-green w3-sepia">
<p>Verde con sepia</p>
</div>Si noti che le classi w3-sepia non sono supportate da Internet Explorer 11 e dalle precedenti versioni dello stesso software.
Hovering
Vediamo ora come impostare l'effetto contrario. In questi esempi, i filtri vengono impostati solo al passaggio del mouse, grazie alle classi hover:
<p>w3-hover-opacity:</p>
<img src="img_snow_wide.jpg" class="w3-hover-opacity" style="width:300px">
<p>w3-hover-grayscale:</p>
<img src="img_snow_wide.jpg" class="w3-hover-grayscale" style="width:300px">
<p>w3-hover-sepia:</p>
<img src="img_snow_wide.jpg" class="w3-hover-sepia" style="width:300px">Anche nel caso dell'hovering è possibile combinare il risultato con altre classi, come ad esempio i colori di sfondo:
<div class="w3-panel w3-red w3-hover-opacity">
<p>w3-hover-opacity</p>
</div>
<div class="w3-panel w3-red w3-hover-grayscale">
<p>w3-hover-grayscale</p>
</div>
<div class="w3-panel w3-red w3-hover-sepia">
<p>w3-hover-sepia</p>
</div>Se combiniamo le classi w3-hover-color con le classi w3-hover-opacity, possiamo ottenere un effetto che risulta essere più "leggero" rispetto alla semplice controparte colorata:
<div class="w3-panel w3-border w3-hover-red w3-padding">
<p>w3-hover-red</p>
</div>
<div class="w3-panel w3-border w3-hover-opacity w3-hover-red w3-padding">
<p>w3-hover-red con w3-hover-opacity</p>
</div>