[CSS] 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>

25/05/2011, 12h08	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 756 Points : 5 756	C'est sympa. Merci pour ce script. __________________ Elen Poukram - Isegoria - Sandawe
	00

27/05/2011, 11h18	#5
Macmillenium Rédacteur/Modérateur Inscription : mars 2008 Messages : 2 288 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Sarthe (Pays de la Loire) Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : mars 2008 Messages : 2 288 Points : 3 205 Points : 3 205	Pas mal l'astuce __________________ Je ne réponds pas aux questions techniques par MP.
	00

26/05/2011, 20h03	#3
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 793 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 793 Points : 5 117 Points : 5 117	ouh on voit tout trouble
	00

26/05/2011, 20h41	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	@Auteur : Arrête le whisky.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email