Salut,
Je viens de "mettre au point" une manière de rendre floue une image, uniquement avec du CSS (et un peu de HTML aussi).
Le principe est de créer plusieurs éléments en-dessous ou au-dessus d'une image dont l'opacité est réduite, ces éléments ayant en background l'image en question, leur opacité est réduite aussi, et on modifie le background-position pour décaler l'image à chaque fois.
Exemple :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <div style="position:relative;"> <div class="f1"></div> <div class="f2"></div> <div class="f3"></div> <div class="f4"></div> <img src="photo.jpg" /> </div>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 img { width : 300px; height : 300px; } div img { filter : alpha(opacity=20); opacity : .2; } div div { position : absolute; top : 0; left : 0; width : 300px; height : 300px; background : url("photo.jpg") no-repeat; filter : alpha(opacity=20); opacity : .2; } div .f1 { background-position : 10px 10px; } div .f2 { background-position : 10px -10px; } div .f3 { background-position : -10px 10px; } div .f4 { background-position : -10px -10px; }
On peut jouer sur le background-position pour donner un effet plus ou moins flouté.
Voir des exemples de différents floutages en ligne :
http://josselin.willette.free.fr/cod...lou-image-css/
Je vais essayer aussi d'en faire un petit plugin pour jQuery histoire d'automatiser tout ça.
Partager