Oggi vediamo cosè la nuova tendenza “Glassmorphism”, ma è solamente una piccola parte di nuove tendenze che cercano di lanciare i designer al giorno d’oggi, attualmente il design di un sito web è molto più di uno semplice stile grafico del tuo sito.
Il design del tuo sito è un passo verso la visione del tuo brand, è un metodo di condividere le funzionalità del tuo brand. Infatti Glassmorphism è una delle tendenze in evidenza che andremo a toccare oggi.
Cos’è glassmorphism?
L’avete incontrato molto più spesso di quanto credete. Prendiamo ad esempio la famosa “Apple”, ha utilizzato questo stile per realizzare l’interfaccia grafica del suo sistema ios
Adesso nel momento in cui sto scrivendo questo articolo, Google ha aggiornato il design dell’area Gmail da qualche giorno lo vedo in questo modo.
La vedi la differenza? Pian piano stiamo abbandonando lo stile flato in cui potevamo vedere colori nitidi accentati.
Quali sono le caratteristiche principali?
E’ tutto abbastanza semplice – questa tendenza è caratterizzata da uno sfondo nitido e non trasparente con gli elementi posizionati sopra che hanno la trasparenza e Blur. Cos’è blur? E’ la sfocatura che aita a mettere in evidenza gli elementi posizionati sopra. un piccolo esempio:
L’idea del design è di fare più morbido il contrasto tra tra gli elementi chiari e scuri, in questo modo possiamo inserire l’elemento sopra uno sfondo e continuare a vederlo anche con gli elementi posizionati sopra.
Glassmorphism con CSS
Ok, abbiamo capito le caratteristiche principali di Glassmorphism, vediamo come implementarlo untilizzando css. Un piccolo esempio dove potresti variare le proprietà in base alle tue esigenze:
backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(209, 213, 219, 0.3);
Tool per generare effetto glass
Qualcuno ha già pensato per facilitarti la vita, questi sono i tool che utilizzo personalemte per generare l’effetto glassmorphism:
