Archive pour la catégorie ‘CSS’

Ajout du projet ‘Aviesan’ dans le portfolio

Jeudi 6 mai 2010

Cela faisait un moment que le portfolio n’avait pas évolué, je suis sur pas mal de projet, mais tout avance relativement doucement. Hier j’ai appris la mise en ligne d’un site maquetté et intégré il y a plus de deux mois. Je vous invite à le visiter.

Un projet vraiment intéressant que j’ai réalisé (après quelques péripéties) et sur lequel je me suis beaucoup amusé. La demande du client était un site qui bouge. Aussi on retrouve pas mal d’élément qui s’anime.
La structure est assez originale et a demandé un peu de réflexion pour l’intégration, mais j’aime les défis.

Le site aviesan, dans le portfolio

Une navigation web comme un jeu-vidéo avec jQuery et CSS.

Samedi 3 avril 2010

Bonjour tout le monde, ça faisait un moment que je n’avais pas posté, mais ceux qui suivent un peu mon actualité savent que je suis l’heureux papa d’une adorable petite fille dont voici le blog : Bonjour de Nina.

Pour ce retour, je vous présente une nouvelle idée que je compte utiliser pour un prochain site.
L’idée est assez simple, faire du site un véritable jeu. On oublie la souris et le côté ‘point and click’ des sites conventionnels et on transforme le curseur en un personnage qui va évoluer dans une page web construite comme un stage de Mario Bros ou ce que vous imaginerez.

Pour cet exemple, j’ai justement utilisé l’univers du célèbre plombier et un gameplay semblable : Avancer dans 2 directions et la possibilité de sauter. Ici les liens deviennent les blocs suspendus dans l’air, en les heurtant vous pourrez changer de page.

Voici la démonstration du site/jeu

Pour réaliser ce mini-jeu, nous allons comme toujours utiliser notre inépuisable bibliothèque jQuery et quelques plugins vraiment très utiles :

  • Le background position
  • Le plugin ‘easing’
  • Plugin pour des courbes
  • La structure HTML est vraiment minimale, on place tous les éléments composant la page en absolut afin d’intéragir facilement avec eux.

    Frappe-moi,j'suis un lien !
    Hit me,I'm a link !
    Retour /Go back.

    Et le CSS qui va avec, rien de compliqué, on positionne nos éléments comme on souhaite les voir apparaître, même si c’est surtout le javascript qui va faire tout le boulôt.

    body {
    	margin:0;
    	font-size:9px;
    	font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #container {
    	width:1000px;
    	height:450px;
    	margin:0 auto;
    	position:relative;
    	background:#cbefff url(../images/decor.png) 0px 500px no-repeat;
    	overflow:hidden;
    }
    #perso {
    	position:absolute;
    	width:30px;
    	height:44px;
    	top:377px;
    	left:100px;
    	background:url(../images/mario.png) 0px 0px no-repeat;
    	overflow:hidden;
    }
    .case {
    	position:absolute;
    	width:43px;
    	height:35px;
    	background:url(../images/case.png) no-repeat;
    	top:268px;
    }
    .c1 { left:461px; }
    .c2 { left:791px; }
    .c3 { left:891px; }
    #legend {
    	position:absolute;
    	width:147px;
    	height:97px;
    	background:url(../images/legend.png) no-repeat;
    	top:20px;
    	left:20px;
    }
    .smile {
    	width:95px;
    	height:51px;
    	padding-top:50px;
    	text-align:center;
    	position:absolute;
    	background:url(../images/smile.png) no-repeat;
    	top:150px;
    }
    .s1 { left:435px; }
    .s2 { left:765px; }
    .s3 { left:865px; }
    

    Voyons sans plus attendre le coeur du sujet, le javascript. Je vais détailler les 2 parties principales du script, la mise en place du décor et les évènements de navigations.
    En effet, il fallait une petite introduction sympa à cette page, alors tous les éléments sont positionnés avec des animate et compagnie.

    $("#container").delay(1000).animate( /*Noté le 'delay', très pratique pour faire une pause.*/
    	{"backgroundPosition": "0px 0px"},
    	{
    		duration: 800,
    		easing: 'easeOutBounce' /*L'effet de rebondissement*/
    	});
    
    $(".case").css({top:-100});
    $(".case").delay(1200).animate(
    	{top:268},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#perso").delay(1600).css({top:-100});
    $("#perso").delay(500).animate(
    	{top:377},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#legend").hide().delay(1500).fadeIn(500);
    setInterval (function(){ /*Va nous permettre de faire tourner en boucle cette animation*/
    	$(".smile").animate({top:140},800).animate({top:150},800);
    },1600);
    $(".smile").hide().css({top:170}).delay(2000).fadeIn(200);
    

    Il est possible de réaliser tout une animation linéaire d’introduction grâce au javascript, et pourquoi pas faire tout un dessin animé ? :)

    Voici la partie ‘intéractive’ du javascript, c’est à dire à partir du moment où on presse une touche du clavier. Dans notre exemple seulement 3 touches entrainent des animations, nous allons donc utiliser de multiples conditions.
    Ce qui est important dans la plupart des jeux, ce sont les collisions entre les éléments. Ici nous n’allons pas vraiment en faire, nous allons les simuler en récupérant la position du personnage, et s’il se trouve à certains endroits quand il saute, nous saurons qu’il doit entrer en contact avec les cases.

    $(window).keydown(function(event) { /*Dès qu'une touche du clavier est enfoncée...*/
    	var pos = $("#perso").position().left; /*Cette variable récupère la position du personnage*/
    
    	if (event.keyCode == '39') { /*Si la flèche de droite est enfoncée*/
    		if ((pos > -10) && (pos < 970)) { /*Pour que le personnage ne sorte pas du champ*/
    			$("#perso")
    			.removeClass("dos") /*Si le personnage était dans l'autre direction*/
    			.css({
    				backgroundPosition: '0px 0px'
    			}).animate({ /*On le déplace vers la gauche*/
    				left: '+=5'
    			}, 20, "linear");
    		}
    	}
    	if (event.keyCode == 37) { /*Si on presse la flèche de gauche*/
    		if ((pos > 0) && (pos < 980)) {
    			$("#perso")
    			.addClass("dos")
    			.css({
    				backgroundPosition: '0px -44px'
    			}).animate({
    				left: '-=5'
    			}, 20, "linear");
    		}
    	}
    
    	var bezier_paramsdos = { /*Les variables pour gérer les courbes des sauts*/
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 350
    	    },
    	    end: {
    	      x: pos - 60,
    	      y: 377,
    	      angle: 100,
    	      length: -4
    	    }
    	}
    	var bezier_params = {
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 10
    	    },
    	    end: {
    	      x: pos + 60,
    	      y: 377,
    	      angle: 80,
    	      length: 4
    	    }
    	}
    
    	if (event.keyCode == '38') { /*Si on presse la flèche du haut*/
    		if ($("#perso").hasClass("dos")) { /*Si le personnage est tourné vers la gauche*/
    			if ((pos > 60) && (pos < 980)) {
    				if ((pos < 511) && (pos > 461)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					}); /*A la fin de l'animation, réorientation de la page.*/
    				};
    				if ((pos < 841) && (pos > 791)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos < 941) && (pos > 891)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px -44px'
    					}).animate({
    					path: new $.path.bezier(bezier_paramsdos)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px -44px'})
    				});
    			}
    		}
    		else {
    			if ((pos > 0) && (pos < 920)) { /*Si le personnage est tourné dans l'autre direction*/
    				if ((pos > 411) && (pos < 461)) {
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 741) && (pos < 791)) {
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 841) && (pos < 891)) {
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px 0px'
    					}).animate({
    					path: new $.path.bezier(bezier_params)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px 0px'})
    				});
    			}
    		}
    	}
    });
    

    Voici pour cette première approche des sites/jeux. La prochaine étape va être d'animer les personnages lorsqu'ils se déplacent, et au lieu d'utiliser des gifs, nous le ferons avec des sprits et du javascript bien sûr. ;)
    Puis nous tenterons de corser un peu la chose avec des monstres à éviter ou à anéantir... Bref, beaucoup de choses en perspective.
    A bientôt.

Festin de Webdesign #2

Lundi 1 mars 2010

Une nouvelle galerie de sites remarquables pour se régaler les yeux et savourer de délicieuses mises en page. Bon appétit.

Catfish Deluxe Le site

gdzilla Smash Le site

Fubiz Interactive Le site

Tori’s Eye Le site

NewGenCoal Le site

Cliframework Le site

Un dragon en CSS uniquement, GROOAR…

Samedi 27 février 2010

Un nouveau tutoriel CSS 3 pour faire une illustration sans passer par un logiciel de graphisme, cette fois nous allons construire un dragon, en utilisant toujours plus de CSS 3 et toujours plus de détails !

Je vais moins détailler les différentes étapes dans ce tutoriel, car le déroulement est globalement le même que pour le blob, je ne m’attarderai pas non plus que les 2 premiers attributs CSS 3 que nous avons précédemment vu (les dégradés et les border-radius), pour les revoir je vous envoie vers le tuto du blob.

Pour commencer voici l’aperçu et le tout compris :
La démonstration
Le pack à télécharger

Pour ce dragon nous allons introduire 2 nouveautés CSS : transform et shadow.
L’attribut transform permet une bonne quantité d’effet à lui tout seul, en effet vous allez pouvoir effectuer une modification sur élément comme un déplacement, une rotation… C’est un peu comme dans Illustrator la fonction transformation. Ici nous allons seulement effectuer un ‘rotate’ qui applique une simple rotation, mais si vous voulez voir tout ce dont le transform est capable je vous invite à lire cette page de Mozilla (même si elle site le webkit c’est surtout pour les utilisateurs de firefox).

Voici ce que donne une rotation de 30° dans votre CSS :

#rotate {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

Rien de bien sorcier, comme on aime. Voyons maintenant les ombres portées en CSS.

C’est pas bien compliqué non plus, il suffit d’indiquer la couleur hexadécimale dont vous souhaitez partir (vous pouvez donc faire une lumière plutôt qu’une ombre) et vous indiquez à la suite 3 valeurs, dans l’ordre : la distance horizontale, la distance verticale et la taille de l’ombre.

#shadow {
	-webkit-box-shadow: #879d20 0 5px 5px;
	-moz-box-shadow: #879d20 0 5px 5px;
	box-shadow: #879d20 0 5px 5px;
}

L’inconvénient c’est qu’on ne peut pas mettre de valeur en pourcentage apparemment.

Je vous mets à présent la structure HTML que je vais commenter au fur et à mesure. (excusez encore la non-indentation… ^^’)

Encore une fois nous avons beaucoup de zones en overflow:hidden qui nous permettent de ne faire apparaître ce qui nous intéresse.

Sans plus attendre voici le copieux CSS, commenté pour vous y retrouver un peu.
Une chose importante à prendre en compte, toutes les tailles sont en pourcentage et sont relatives à celle de #dragon vous pouvez donc afficher un dragon de 50px ou 10 000px sans problème. Il suffit de remplacer les taille de #dragon.

body {
	margin:0;
}
.relative {
	position:relative;
	width:100%;
	height:100%;
}
#dragon {
	position:relative;
	width:400px;/*Valeur à modifier si vous voulez changer la taille générale du dragon*/
	height:400px;/*Idem que width*/
	margin-top:10%;/*A modifier où enlever pour positionner autrement dans la page*/
	margin-left:35%;/*Idem pour la position*/

}
#corps {
	position:relative;
	float:right;
	width:75%;
	height:100%;
	background:#bfd12b;
	-webkit-border-radius: 50% 50% 10% 0;
	-moz-border-radius: 50% 50% 10% 0;
	border-radius: 50% 50% 10% 0;
	z-index:10;/*Indique le niveau du plan pour les superpositions*/
}

/*_________________________ YEUX _______________________*/
#oeil_gch,
#oeil_drt {
	position:absolute;
	overflow:hidden;
}
#oeil_gch .fond,
#oeil_gch .lumiere,
#oeil_gch .pupille,
#oeil_gch .lentille,
#oeil_gch .rond,
#oeil_gch .reflet1,
#oeil_gch .reflet2,
#oeil_drt .fond,
#oeil_drt .lumiere,
#oeil_drt .pupille,
#oeil_drt .lentille,
#oeil_drt .rond,
#oeil_drt .reflet1,
#oeil_drt .reflet2 {
	position:absolute;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}
#oeil_gch {
	width:20%;
	height:15%;
	-webkit-transform: rotate(30deg);/*On fait tourner l'oeil dans son entier*/
	-moz-transform: rotate(30deg);
	top:20%;
	right:55%;
	border-top:2px solid #879d20;
}
#oeil_gch .fond {
	width:100%;
	height:100%;
	bottom:15%;
	left:0;
	background:#a3b726;
}
#oeil_gch .lumiere {
	width:100%;
	height:100%;
	bottom:5%;
	left:0;
	background:#d9ed38;
}
#oeil_gch .pupille {
	width:100%;
	height:100%;
	bottom:10%;
	left:0;
	background:#fff;
}
#oeil_gch .lentille {
	width:75%;
	height:75%;
	top:12.5%;
	left:20%;
	background:#f69154;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.50, #fcbb56),
	    color-stop(0.75, #f78122)
	);
	background: -moz-radial-gradient(
	    center,
	    #fcbb56 50%,
	    #f78122 75%
	);
}
#oeil_gch .rond {
	width:25%;
	height:25%;
	top:37.5%;
	left:50%;
	background:#4c4c4c;
}
#oeil_gch .reflet1 {
	width:40%;
	height:40%;
	background:#fff;
	top:15%;
	left:20%;
}
#oeil_gch .reflet2 {
	width:20%;
	height:20%;
	background:#fff;
	top:43%;
	left:70%;
}
#oeil_drt {
	width:20%;
	height:15%;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	top:20%;
	right:3%;
	border-top:2px solid #879d20;
}
#oeil_drt .fond {
	width:100%;
	height:100%;
	bottom:15%;
	left:0;
	background:#a3b726;
}
#oeil_drt .lumiere {
	width:100%;
	height:100%;
	bottom:5%;
	left:0;
	background:#d9ed38;
}
#oeil_drt .pupille {
	width:100%;
	height:100%;
	bottom:10%;
	right:0;
	background:#fff;
}
#oeil_drt .lentille {
	width:75%;
	height:75%;
	top:12.5%;
	right:20%;
	background:#f69154;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.50, #fcbb56),
	    color-stop(0.75, #f78122)
	);
	background: -moz-radial-gradient(
	    center,
	    #fcbb56 50%,
	    #f78122 75%
	);
}
#oeil_drt .rond {
	width:25%;
	height:25%;
	top:37.5%;
	right:50%;
	background:#4c4c4c;
}
#oeil_drt .reflet1 {
	width:40%;
	height:40%;
	background:#fff;
	top:2%;
	left:18%;
}
#oeil_drt .reflet2 {
	width:20%;
	height:20%;
	background:#fff;
	top:58%;
	left:32%;
}

/*_________________________ BOUCHE _______________________*/
#bouche {
	position:absolute;
	overflow:hidden;
	width:80%;
	height:30%;
	top:36%;
	right:0;
}
#bouche .fond {
	position:absolute;
	width:200%;
	height:300%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#553c11;
	bottom:-100%;
	left:0;
}
#bouche .surfond {
	position:absolute;
	width:200%;
	height:300%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#fff;
	bottom:-100%;
	left:80%;
}
#bouche .dent1,
#bouche .dent2,
#bouche .dent3,
#bouche .dent4,
#bouche .dent5,
#bouche .dent6 {
	position:absolute;
	width:50%;
	height:90%;
	background:#bfd12b;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index:150;
}
#bouche .dent4,
#bouche .dent6 {
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.50, #fcbb56),
	    color-stop(0.75, #f78122)
	);
	background: -moz-linear-gradient(
	    bottom right,
	    #bfd12b 80%,
	    #9ead24 90%
	);
}
#bouche .dent5 {
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.50, #fcbb56),
	    color-stop(0.75, #f78122)
	);
	background: -moz-linear-gradient(
	    bottom right,
	    #bfd12b 70%,
	    #9ead24 85%
	);
}
#bouche .dent1 {
	top:-65%;
	left:0%;
}
#bouche .dent2 {
	top:-65%;
	left:45%;
}
#bouche .dent3 {
	top:-80%;
	left:75%;
}
#bouche .dent4 {
	top:90%;
	left:-5%;
}
#bouche .dent5 {
	top:80%;
	left:30%;
}
#bouche .dent6 {
	top:85%;
	left:70%;
}

/*_________________________ VENTRE _______________________*/
#ventre {
	position:absolute;
	right:5%;
	bottom:0;
	width:65%;
	height:30%;
	background:#a7ba26;
	-webkit-border-radius:50%;
	-moz-border-radius:20% 20% 20% 0;
	border-radius:50%;
}
#ventre .bande1,
#ventre .bande2 {
	width:100%;
	height:5%;
	position:absolute;
	top:35%;
}
#ventre .bande2 {
	top:65%;
}
#ventre .bande_ombre,
#ventre .bande_lumiere {
	width:100%;
	height:50%;
	background:#95a622;
	float:left;
}
#ventre .bande_lumiere {
	background:#b9d32b;
}

/*_________________________ PATTES _______________________*/
#pattes .pied_gch,
#pattes .pied_drt {
	width:30%;
	height:15%;
	position:absolute;
	bottom:0;
	right:55%;
}
#pattes .pied_drt {
	right:-20%;
}
#pattes .orteil1,
#pattes .orteil2,
#pattes .orteil3 {
	position:absolute;
	width:35%;
	height:100%;
	-webkit-border-radius:50% 50% 0 0;
	-moz-border-radius:50% 50% 0 0;
	border-radius:50% 50% 0 0;
	background:#bfd12b;
	background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
	background: -moz-linear-gradient(left, #879d20 5%, #bfd12b);

}
#pattes .orteil1 {
	z-index:100;
	left:0;
}
#pattes .orteil2 {
	z-index:75;
	left:30%;
}
#pattes .orteil3 {
	z-index:50;
	left:60%;
}
#pattes .ongle {
	position:absolute;
	bottom:0;
	left:40%;
	width:75%;
	height:30%;
	background:#eee;
	-webkit-border-radius:50% 50% 0 0;
	-moz-border-radius:50% 50% 0 0;
	border-radius:50% 50% 0 0;
}

/*_________________________ ECAILLES _______________________*/
.ecaille1,
.ecaille2,
.ecaille3,
.ecaille4,
.ecaille5 {
	width:10%;
	height:7.5%;
	position:absolute;
	background:#bfd12b;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	-webkit-box-shadow: #879d20 0 5px 5px;
	-moz-box-shadow: #879d20 0 5px 5px;
	box-shadow: #879d20 0 5px 5px;
}
.ecaille1 {
	top:20%;
	left:10%;
}
.ecaille2 {
	top:65%;
	left:15%;
}
.ecaille3 {
	top:65%;
	left:87%;
}
.ecaille4 {
	top:80%;
	left:0%;
}
.ecaille5 {
	top:5%;
	left:60%;
}

/*_________________________ QUEUE _______________________*/
#queue {
	position:relative;
	float:left;
	width:25%;
	height:50%;
	top:50%;
	overflow:hidden;
}
#queue .queue {
	position:absolute;
	bottom:0;
	width:200%;
	height:100%;
	background:#bfd12b;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}
#queue .masque {
	position:absolute;
	width:100%;
	height:50%;
	left:50%;
	top:-3%;
	background:#fff;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}

/*_________________________ FLAMME _______________________*/
#flamme {
	position:absolute;
	width:50%;
	height:20%;
	right:-40%;
	top:36%;
	/*-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);*/
	z-index:100;
}
#flamme .flamme_gch,
#flamme .flamme_drt {
	width:50%;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
}
#flamme .flamme_gch .feu {
	width:200%;
	height:200%;
	position:absolute;
	top:30%;
	left:0;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#f69154;
}
#flamme .flamme_gch .masque {
	width:400%;
	height:400%;
	position:absolute;
	top:70%;
	left:-100%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#fff;
}
#flamme .flamme_drt .feu {
	width:200%;
	height:200%;
	position:absolute;
	bottom:30%;
	right:0;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#f69154;
	background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
	background: -moz-linear-gradient(left, #f69154 60%, #ffce57);
}
#flamme .flamme_drt .masque {
	width:400%;
	height:400%;
	position:absolute;
	bottom:70%;
	right:-100%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#fff;
}

Et voilà le résultat :

C’est assez long comme vous pouvez le voir, mais le résultat c’est un dragon sympa, que vous pouvez positionner où vous voulez (sur fond uni), à la taille que vous voulez.

A bientôt pour un autre tutoriel d’illustration CSS !

Pseudo-class :target (suite), faisons un carrousel seulement en CSS

Vendredi 26 février 2010

Carrousel

Continuons notre petit tour d’horizon des possibilités de la pseudo-class :target avec un carrousel d’images ou de contenus.

Vous connaissez le principe du carrousel, Une série de contenus que dont on affiche un nombre limités d’éléments et qu’on fait défiler. ça se fait en 2 temps trois mouvement avec des effets de la mort en veux-tu en voilà… Mais en CSS, qu’en pensez-vous ? Vous n’utiliserez surement pas cette technique, mais c’est toujours bon de la connaitre.

Voici la solution que je vous propose :
La démonstration
Le Pack à télécharger

La technique que nous allons utiliser est une imbrication de div qui vont nous permettre de masquer les éléments au fur et à mesure. Nous attribuerons des id à chacune des div afin que à chaque fois que nous cliquerons sur un lien nous pourrons facilement désigner une ‘ancre’ avec :target dont nous cilqueront des éléments en particulier.
Pour résumer, Nous allons créer une div pour chaque évènement que nous voulons effectuer (avancer et reculer dans le carrousel).

Ce qu’il faut garder en tête, c’est qu’on ne peut cibler qu’un seul élément puisqu’il s’agit d’un élément avec un id, et vous le savez on ne met qu’un id par élément et on ne les répète pas ! Par conséquent on désigne plusieurs éléments en ciblant le conteneur.

La contrainte étant que plus avez d’éléments dans votre carrousel et plus vous aurez de niveaux à intégrer, ici nous allons faire un exemple avec 4 bloc de texte, dont voici la structure HTML (contrairement à mon highlighter, indentez bien votre code pour vous y retrouver dans cette pyramide) :

Hello Salut Comment va ? Bien, merci !

Si comme dans notre exemple vous voulez faire avancer le carrousel d’un élément à la fois, nous aurons autant de liens que d’éléments. Pour 4 éléments : 4 liens avancer et 4 liens reculer. En comptant bien le lien nul pour le début et la fin, sauf si vous voulez faire une boucle.

Voici le CSS qui nous sert en bonne partie pour habiller le site, la partie intéressante étant celle qui énumère les listes d’action :target.

body { margin:0; }
#container {
	width:700px;
	margin:50px auto;
}
a {
	text-decoration:none;
	font-weight:bold;
	color:#47817f;
	float:left;
	line-height:300px;
	text-align:center;
}
a:hover {
	color:#fff;
	background:#aaa;
}
#bloc {
	width:680px;
	padding:10px;
	background:#eee;
	border-bottom:3px solid #aaa;
	float:left;
}
#link_prev, #link_next,
#link_prev a, #link_next a,
#link_prev span, #link_next span {
	width:20px;
	float:left;
	height:300px;
}
#link_prev, #link_next { overflow:hidden; }
#link_prev a, #link_next a,
#link_prev span, #link_next span {
	text-align:center;
}/*La partie intéressante débute ici...*/
#bloc_open_2:target .a1,
#bloc_open_3:target .a2, #bloc_open_3:target .a1,
#bloc_open_4:target .a3, #bloc_open_4:target .a2, #bloc_open_4:target .a1,
#bloc_close_4:target .a2, #bloc_close_4:target .a1,
#bloc_close_3:target .a1 {
	display:none;
}
#bloc_close_4:target .a3,
#bloc_close_3:target .a2, #bloc_close_3:target .a3,
#bloc_close_2:target .a1 {
	display:block;
}/*Jusqu'ici.*/
#img .a4 { background:#f00; }
#img .a3 { background:#0ff; }
#img .a2 { background:#f0f; }
#img .a1 { background:#ff0; }
#img {
	width:640px;
	height:300px;
	overflow:hidden;
	float:left;
}
#img span {
	text-align:center;
	line-height:300px;
	float:left;
	width:310px;
	height:300px;
	margin:0 5px;
}

Et voilà cette technique est relativement simple même si peu pratique, mais je la trouve intéressante.

Si vous avez d’autres idées pour construire un carrousel ou utiliser la pseudo-class :target, n’hésitez pas à nous les faire partager !

A bientôt.