Blog iamvdo.me
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 ! :)
#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.