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
