Come creare un Effetto Vetro Smerigliato

L'effetto vetro smerigliato e gli effetti traslucidi sono diventati molto popolari dall'avvento dell'animazione nel web design. Questi effetti, se combinati con animazioni e funzionalità di tipo parallasse, aggiungono profondità alle pagine, conferendo loro una qualità quasi 3D. Di seguito evidenziamo alcuni degli effetti che si possono ottenere utilizzando una combinazione di colore, opacità e filtri di sfondo. Abbiamo mostrato gli effetti sovrapponendo caselle stilizzate con diversi gradi di opacità, colore ed effetti di filtro su immagini 'fisse nella finestra'. Funzionerebbero altrettanto bene se le caselle fossero elementi animati che scivolano su altri contenuti della pagina durante lo scorrimento.

Immagini multiple Fisse-nella-Finestra

Nell'esempio seguente, diversi elementi sono stati combinati in un blocco di layout, ognuno utilizzando la STESSA immagine, e tutti fissati nella finestra. Il blocco di layout stesso ha un'immagine di sfondo, fissa nella finestra e con un filtro di sfocatura dello sfondo applicato a 4x. Successivamente, è stata aggiunta una casella con un riempimento di immagine, angoli arrotondati e un bordo bianco. Anche in questo caso, l'immagine era fissa nella finestra, ma questa volta senza alcun filtro di sfondo applicato. Abbiamo quindi aggiunto la casella traslucida per coprire circa il 50% della casella di contorno. Questa casella non ha riempimento, ma ha un filtro di sfocatura dello sfondo applicato a 8x. Infine, il testo 'Smerigliato' è stato aggiunto sopra la casella traslucida. Il testo ha l'effetto 'Ritaglia su testo' applicato, utilizzando la stessa immagine di tutti gli altri elementi. Ancora una volta, l'immagine è stata impostata per essere fissa nella finestra. Il testo bianco è solo una normale casella di testo aggiunta sopra l'intero blocco di layout. Il risultato finale ha l'effetto di un'unica immagine con diversi gradi di sfocatura applicati, mentre la parola 'Smerigliato' ha l'aspetto di essere incisa su un pannello di vetro smerigliato, consentendo di visualizzare l'immagine sottostante con la massima nitidezza.