Effetti css: come applicare il backdrop-filter

ARGOMENTI DELL'ARTICOLO

Se vuoi applicare effetti speciali alla tua pagina web, questo articolo fa per te.

Oggi parliamo di CSS e in particolare della proprietà backdrop-filter.

Come sicuramente sai ci sono plugin per realizzare qualsiasi cosa, ma se vuoi applicare effetti grafici senza appesantire di un grammo il sito, ti conviene lasciar perdere i plugins e concentrarti sui CSS.

Backdrop-filter: cosa è e come si applica

Il backdrop-filter è una proprietà CSS che si può applicare a degli elementi per donare loro effetti di filtro particolari.

Questa proprietà dona l’effetto solamente allo sfondo dell’elemento e non a tutto l’elemento.

Come si applica il backdrop-filter?

Per applicare il backdrop filter bisogna dichiarare le proprietà sottostante alla classe o all’id a cui intendiamo applicare il filtro.

background-color: #FFFFFF44;
backdrop-filter: blur(8px);


ad esempio:

Voglio realizzare uno sticky menu con effetto sfocatura (come il mio attuale menu).

Cerco l’id della mia top bar, in questo caso #topbar e vado a applicare le proprietà:

#topbar {
background-color: #FFFFFF44;
backdrop-filter: blur(8px) ;
}

L’effetto sarà il seguente:

Effetti css: applicazione backdrop-filter

In questo caso ho scelto l’effetto blur (sfocatura) quindi tutto ciò che rimane “sotto” la mia topbar sarà sfocato.

Backdrop filter: quali sono gli altri valori?

Non solo Blur, ma possiamo impostare diversi valori alla proprietà backdrop filter come luminosità, contrasto, effetto sepia, bianco e nero, opacità, saturazione.. per impostarli e regolare meglio l’effetto modifica i valori tra parentesi.

backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%)

Se ti è piaciuto il post, hai dubbi o hai bisogno di info, lasciami un commento qui sotto!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

ti consiglio di leggere..

Libri e manuali su web design, SEO marketing e social media

Valentina Olini

web designer freelance

Ho iniziato a lavorare nel campo del web design nel 2005 occupandomi di UX, grafica e interfacce web.

Il primo sito web l’ho realizzato nel 1998 quando non esistevano editor e CMS ma solo html e css scritti a mano.

Sono della vecchia scuola, meno plugins e più codice.

Da Oltre 16 Anni Trasformo
Semplici Idee In Progetti Online Unici E Di Successo.

Oggi ti formo e informo su Wordpress.