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

Effet « soft-focus » en CSS

Réaliser un flou artistique avec les filtres CSS

Création: mai 2013Modifié:

Survolez l'image pour désactiver l'effet

Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Opera
CSS3...
Filtres CSS
Partagez
Facebook Twitter

Votez

18 votes3.06

Reproduire cette technique très populaire qu’est le flou artistique (soft-focus) en CSS uniquement, via l’utilisation des filtres CSS et de l’opacité.

L’effet « soft-focus » ou « soft-blur » est extrêmement simple à réaliser. Il suffit d’appliquer un léger effet de flou et de transparence à une image qui se superpose à elle-même.

Voici donc le HTML utilisé, deux images identiques dans une <div> :

<div>
   <img src="src.jpg" alt="" />
   <img src="src.jpg" alt="" />
</div>
Note : Afin d’éviter de dupliquer le code HTML, il est possible de cloner l’image via JavaScript. Si vous avez pensé aux pseudo-éléments CSS, c’est très bien, mais malheureusement, ceux-ci ne s’appliquent pas aux images.

Création de l’effet soft-focus

Les images doivent se superposer, nous utilisons donc le positionnement absolu :

img{
   position: absolute;
}

Enfin, il nous suffit d’appliquer un flou avec la propriété filter, puis une opacité avec opacity.

img:last-child{
   filter: blur(2px);
   opacity: .5;
}
Note : Attention, n’oubliez pas de mettre les bons préfixes.

Et c’est tout ! :)

Envie d'une nouvelle démo?

Un p'tit mot...

#1par pierre, le 31 mai 2013

merci pour ces articles intéressants, ce serait cool si vous aviez une feuille de style pour l’impression, merci !

#2par Shoo, le 7 octobre 2013

Bonjour, je viens de tester votre code et je n’arrive pas à l’utilisé en test sur firefox, opéra, votre version « soft-focus » en CSS quand à elle fonctionne. Mais lorsque je suis vos directives et utilise le css filter cela ne marche pas pour ces navigateurs, contrairement à safari, chrome.
ps : Le soft-blur ne marche pas sur opera.


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.)