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>
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;
}
Et c’est tout ! :)
#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.