Flouter une image en CSS + plugin jQuery

Version imprimable

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:

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:

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.

25/05/2011, 12h08
vermine

C'est sympa. :)
Merci pour ce script.
26/05/2011, 20h03
Auteur

ouh on voit tout trouble :wow:
26/05/2011, 20h41
Bisûnûrs

@Auteur : Arrête le whisky. :roll:
27/05/2011, 11h18
Macmillenium

Pas mal l'astuce :ccool:

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

Code:

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:

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

Bonsoir

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<div class="flou"></div>
		<div class="test"></div>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-05-29T00:50:00.000+02:00" pubdate>2011-05-29</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		(function($){
			$.fn.flou = function(options){
				var opts = $.extend(true, {}, $.fn.flou.defaults, options);
 
				return this.each(function(i, item){
					$(item).append('<img src="' + opts.src + '" alt="photo" style="position:relative; opacity:' + opts.opacity + ';" />');
 
					var d = $("<div/>", {
						css: {
							opacity: opts.opacity,
							background: 'url(' + opts.src + ') no-repeat',
							width: opts.width + 'px',
							height: opts.height + 'px',
							position: 'absolute'
						}
					});
 
					$(item).prepend(d.clone().css('background-position', '-' + opts.taille + 'px -' + opts.taille + 'px'),
									d.clone().css('background-position',       opts.taille + 'px '  + opts.taille + 'px'),
									d.clone().css('background-position',       opts.taille + 'px -' + opts.taille + 'px'),
									d.clone().css('background-position', '-' + opts.taille + 'px '  + opts.taille + 'px'));
				});
			};
 
			$.fn.flou.defaults = {
				src: "http://josselin.willette.free.fr/codessources/flou-image-css/photo.jpg",
				width: 300,
				height: 300,
				taille: 5,
				opacity: 0.2
			};
		})(jQuery);
 
		$(function(){
			$('.flou').flou();
 
			$('.test').flou({
				src: "http://danielhagnoul.developpez.com/images/badge.jpg",
				width: 254,
				height: 165,
				taille: 3,
				opacity: 0.35
			});
		});
	</script>
</body>  
</html>