Archive pour février 2010

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.

Festin de Webdesign #1

Lundi 22 février 2010


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

Chevychase Le site

Undesign Le site

GrooveShark Le site

Narrow Design Le site

Made by Fudge Le site

Indie Labs Le site

A bientôt pour un nouveau festin !

Réalisons une galerie d’images en CSS avec la pseudo-class :target

Dimanche 21 février 2010

Zoom sur une pseudo-class apparu avec le CSS 3, :target. Elle permet de modifier les styles d’un élément ciblé, vous l’avez peut-être déjà aperçu dans Wikipédia lorsque vous cliquez sur ancre, le texte auquel vous êtes reportés dans les page est surligné.

Pour cet exercice très simple, nous allons réaliser une petite galerie, c’est à dire une liste d’images, et un espace où elles apparaissent quand on clique dessus.

Déjà un aperçu du résultat : Démonstration
Et voici le pack HTML/CSS cadeau : Téléchargez

Ici, nous allons remplacer les images par des blocs de couleurs, mais c’est la même chose !
Par défaut toutes les images sont cachés grâce à notre bon vieux display:none, et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.

Voici comment nous allons procéder, nous allons faire une grande zone pour l’image sur le dessus avec 3 aperçus en dessous.


Et voici le CSS :

body {
	margin:0;
}
#container {
	width:720px;
	margin:50px auto;
}
#galerie {
	width:700px;
	background:#eee;
	border-bottom:3px solid #aaa;
	padding:10px;
	float:left;
}
#bloc_img {
	width:700px;
	height:500px;
	float:left;
	margin-bottom:10px;
	border-top:1px solid #aaa;
	border-bottom:1px solid #fff;
}
#img_1, #img_2, #img_3 {
	width:700px;
	height:500px;
	display:none;
}
#img_1:target {
	display:block;
	background:#03a7e7;
}
#img_2:target  {
	display:block;
	background:#fdd12c;
}
#img_3:target  {
	display:block;
	background:#467d76;
}
#bloc_bt {
	float:left;
	width:700px;
	height:50px;
}
a.bt_1, a.bt_2, a.bt_3 {
	float:left;
	width:226px;
	height:50px;
	margin-right:11px;
	color:#fff;
	text-align:center;
	line-height:50px;
	text-decoration:none;
}
a.bt_1:hover, a.bt_2:hover, a.bt_3:hover {
	color:#545454;
}
a.bt_1 {
	background:#03a7e7;
}
a.bt_2 {
	background:#fdd12c;
}
a.bt_3 {
	margin-right:0;
	background:#467d76;
}

Voilà, ici ce qu’il faut comprendre, c’est que quand vous allez cliquez sur un lien qui cible un des éléments comportant la pseudo-class l’élément ciblé adopte ds nouveaux styles. L’intérêt est de pouvoir interagir à distance avec un élément précis en lui appliquant des effets et tout cela sans javascript.

Vous pouvez ajouter d’autres aperçus, y mettre de vraies images (la hauteur de l’affichage général pourra s’adapter) vous pouvez mettre les liens à l’autre bout de la page, les styles agiront et en plus vous serez transportez à l’élément indiqué grâce à l’ancre.

Il y a beaucoup de chose à faire avec cette pseudo-class :target et dans un prochain article nous ferons un petit carrousel entièrement en CSS !

A +

Mise à jour du Portfolio

Dimanche 21 février 2010

Pour ceux que ça intéresse, j’ai installé une galerie avec les derniers sites web que j’ai réalisé : Portfolio.

La galerie sera complétée au fur et à mesure, et je reviendrai plus en détail sur certain projets pour détailler certaines techniques utilisée.