come sfocare lo sfondo su html


Share Button

Per chi (pochissimi) non li conoscesse,  i filtri CSS3 permettono di replicare alcuni effetti che normalmente eravamo abituati a realizzare esclusivamente con dei software di editing fotografico come Photoshop.

Con alcuni browser (per lo più Google Chrome e Safari) si possono ottenere con pochissime righe di CSS.

In questo tutorial sugli effetti CSS3 mi piace cominciare dal più utilizzato.

CSS Blur

Uno degli effetti più visti, sicuramente per l’impatto che esso può dare.

Si ottiene dando all’elemento a cui vogliamo applicare la sfocatura questi parametri:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

In questo caso ho aggiunto 5px di blurring, si può “giocare” con i pixel per stabilire l’effetto più adatto al progetto che dobbiamo realizzare.

Ogni parametro è riferito ad un browser engine differente (ad esempio, il webkit serve per Safari).

 

See the Pen GJzEvp by Eugenio (@rupertone) on CodePen.0

 

Autore Eugenio Corrao

https://www.eugeniocorrao.it/

Mi occupo della realizzazione di siti web, restyling, fotoritocco digitale, creazione di logo per aziende. Da diversi anni studio l’architettura dell’informazione sul web, lo sviluppo di Internet negli anni e le tecniche più all’avanguardia per lo sviluppo dei siti web.

Clicca per leggere la risposta completa

Extenzilla.it
Logo
Enable registration in settings - general