Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Filtre CSS « flou localisé » ou « flou progressif »

Créer de la profondeur de champ avec les filtres et les masques

Création: juin 2013Modifié:

Effet flou progressif radial

Effet flou progressif linéaire

Survolez une image pour désactiver l'effet

Contenu
Full CSS
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

10 votes3.33

Combiner les avancées graphiques de CSS3 (les filtres et les masques) pour réaliser des effets d’images saisissants !

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.

Pour en savoir plus sur les filtres et les masques, regardez une présentation de ces 2 sujets que j’avais fait il y a quelques temps. Vous y trouverez également d’autres ressources intéressantes.

Envie d'une nouvelle démo?

Un p'tit mot...

#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 :)


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)