Blog iamvdo.me
Cette démo fait suite à Effet « soft-focus » en CSS, mais fait entrer les masques CSS et SVG pour créer des effets de « flou progressif » ou de « flou localisé ».
Le principe est donc strictement le même que la démo précédente, hormis l’utilisation des masques sur la seconde image qui superpose la première. (Je vous conseille de lire le premier article avant de continuer)
Ajout des filtres CSS et SVG
Dans ce tuto, je vais entrer sur la partie spécifique des filtres et des masques. Nous partons donc du principe que nos deux images sont superposées :
Il nous suffit d’appliquer un flou avec la propriété filter sur cette seconde image. Le flou est ajouté via les filtres CSS (pour les navigateurs WebKit) et les filtres SVG (pour Firefox)
img:last-child{
-webkit-filter: blur(5px);
filter: url('#flou');
}Et le SVG correspondant :
<svg>
<filter id="flou">
<feGaussianBlur stdDeviation="5" />
</filter>
</svg>Ajout des masques CSS et SVG
Maintenant, il nous faut masquer une partie de cette image avec les masques. Pour WebKit, cela doit se faire avec la propriété -webkit-mask et pour Firefox, cela se fait via les masques SVG et la propriété mask.
img:last-child{
...
-webkit-mask: linear-gradient(black, transparent 30%, black);
mask: url('#mask');
}Et le SVG correspondant au masque :
<svg>
<mask id="mask">
<rect width="400" height="300" fill="url(#l1)"></rect>
<linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0%"/>
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</mask>
</svg>Cette technique ouvre la porte a beaucoup d’effets visuels très intéressants. Grâce aux masques et aux filtres, vous pouvez créer des effets de lumière, des accentuations locales de contraste, et certainement encore plein d’autres choses auxquelles je n’ai pas encore pensé. :) N’hésitez pas à partager vos démos dans le forum.
#1par bobby, le 20 juin 2013
toujours aussi épatant !! :)
#2par fxgl, le 30 juin 2013
magnifique effet :D encore bravo
#3par benbass, le 8 juillet 2013
superbe ! merci :)