Discussion :

[Bisûnûrs]

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.

[vermine]

C'est sympa.
Merci pour ce script.

[Auteur]

ouh on voit tout trouble

[Bisûnûrs]

@Auteur : Arrête le whisky.

[Macmillenium]

Pas mal l'astuce

[Bisûnûrs]

Voilà pour le plugin jQuery, je suis ouvert à toute optimisation :

Code javascript :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function($) {
   $.fn.flou = function( options ) {
      var defaults = {
         taille  : '5',
         opacity : '0.2'
      };
 
      var opts = $.extend( defaults, options );
 
      function createFlou() {
         var img = $( this ).find( 'img' );
 
         $( this ).css( 'position', 'relative' );
 
         for ( var i = 1; i <= 4; i++ ) {
            $( this ).prepend( '<span class="flou-state-' + i + '"></span>' );
         }
 
         $( this ).find( '.jw-flou-state-1, .jw-flou-state-2, .jw-flou-state-3, .jw-flou-state-4' ).css( {
            opacity   : opts.opacity,
            background: 'url(' + img.attr( 'src' ) + ') no-repeat',
            width     : img.width() + 'px',
            height    : img.height() + 'px',
            position  : 'absolute',
            top       : '0',
            left      : '0'
         } );
 
         $( this ).find( '.jw-flou-state-1' ).css( 'background-position', '-' + opts.taille + 'px -' + opts.taille + 'px' );
         $( this ).find( '.jw-flou-state-2' ).css( 'background-position',       opts.taille + 'px '  + opts.taille + 'px' );
         $( this ).find( '.jw-flou-state-3' ).css( 'background-position',       opts.taille + 'px -' + opts.taille + 'px' );
         $( this ).find( '.jw-flou-state-4' ).css( 'background-position', '-' + opts.taille + 'px '  + opts.taille + 'px' );
 
         $( this ).find( 'img' ).css( 'opacity', opts.opacity );
      }
 
      $( this ).each( createFlou );
 
      return $( this );
   };
})(jQuery);

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script>
$( function() {
  $( '.flou' ).flou();
} );
</script>
 
<div class="flou">
  <img src="photo.jpg" alt="photo" />
</div>