Flouter une image en CSS + plugin jQuery

**Bisûnûrs** · 25/05/2011, 11h52

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** · 25/05/2011, 12h08

C'est sympa.

Merci pour ce script.

**Auteur** · 26/05/2011, 20h03

ouh on voit tout trouble

**Bisûnûrs** · 26/05/2011, 20h41

@Auteur : Arrête le whisky.

**Macmillenium** · 27/05/2011, 11h18

Pas mal l'astuce

**Bisûnûrs** · 27/05/2011, 12h32

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>

**danielhagnoul** · 29/05/2011, 00h53

Bonsoir

Code :

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
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>

Flouter une image en CSS + plugin jQuery

Contribuez

Discussions similaires

Partager

Partager