Comme promis dans l’article dessiner en css : les formes, nous allons aujourd’hui apprendre à dessiner une poule en CSS !

Si vous nous suivez depuis longtemps vous aurez reconnu la poule que j’avais dessiné pour Pâques l’an dernier, qui est inspirée d’une illustration trouvée sur Dribbble.

Bien commencer: préparer son body

Quand je dessine en CSS, chaque élément visible est une div que je re-stylise (ou un :before/:after mais toujours depuis une div). Nous allons donc commencer simple pour notre HTML avec simplement une div avec une class chicken:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Chicken</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="chicken"></div>
</body>
</html>

Ici notre div chicken va simplement servir de wrapper au reste et n’aura pas de style. Nous allons simplement la mettre en position: relative pour positionner les autres éléments par rapport à celle là ! Et comme dans la plupart de mes tutoriels on va styliser le body pour centrer notre dessin en passant par un display: flex !

body {
	background-color: #00bcd4;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.chicken {
	position: relative;
}

Maintenant que la base est posée, nous allons pouvoir passer au choses sérieuses et commencer à dessiner notre poule. Ajoutez une div avec comme class body dans votre div chicken. Et pour répondre à un des grands mystères de l’univers « L’oeuf ou la poule ?« , en réalité cette question n’a pas de sens puisque la poule EST un oeuf ! Nous allons donc en guise de corps dessiner une forme d’oeuf:

.body {
	width: 150px;
	height: 170px;
	background-color: #fff;
	border-radius: 50% / 60% 60% 40% 40%;
}

Si vous ne comprenez pas bien comment fonctionne ce code, je vous invite à lire l’article de la semaine dernière dans lequel j’expliquais comment dessiner un oeuf. Comme nous allons vouloir dessiner un visage à l’intérieur, nous allons mettre le body en position: relative. Et Pour plus de réalisme nous allons ajouter une petite ombre également, ajoutez donc ces deux lignes dans votre class body:

position: relative;
box-shadow: 7px 7px 0 7px #eee;

Etape 2: le visage

Nous allons commencer par donner la vue à notre poule. Si vous observez l’illustration, nous avons un oeil qui apparait par dessus le corps et un par dessous. Nous allons donc créer deux div avec la class eye, une dans notre div body et une autre dans notre div chicken, juste au dessus du body. Sur notre première div eye nous allons également ajouter une class eye-right pour le distinguer de l’autre et le positionner comme il faut. Nous allons ensuite en faire deux ronds noirs:

.eye {
	position: absolute;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: #000;
	top: 50px;
}
.eye-right {
	left: 50px;
}

Si tout se passe bien, vous devriez obtenir pour l’instant ceci:

Un oeuf qui vous regarde
Un oeuf qui vous regarde

Nous allons maintenant pouvoir lui ajouter un bec ! Nous allons séparer le bec en deux parties: la partie haute et la partie basse, ajoutez-donc ceci dans votre body:

<div class="beak-top"></div>
<div class="beak-bottom"></div>

Pour la partie haute nous allons dessiner un demi-cercle jaune. Pour faire ça il vous suffit de mettre un border-radius sur les deux coins du haut de la même taille que la hauteur de votre élément. Nous allons également rajouter un effet de « reflet » sur le bec, pour ça vous pouvez passer par une shadow ou une border. Et comme c’est plus court à écrire, je suis ici passé par une border que je met simplement en blanc à gauche du bec.

Pour la partie du bas, on dessine simplement un rectangle orange avec les deux coins du bas arrondis:

.beak-top {
	width: 27px;
	height: 15px;
	background-color: #FFDA0F;
	border-radius: 27px 27px 0 0;
	position: absolute;
	top: 70px;
	left: -10px;
	border-left: 3px solid #fff;
}
.beak-bottom {
	width: 20px;
	height: 7px;
	background-color: #f0ba43;
	border-radius: 0 0 7px 7px;
	position: absolute;
	top: 85px;
	left: -1px;
}

Et pour finir le bec, il faut ajouter la partie rouge en dessous du bec. Et comme je n’ai aucune idée de comment ça s’appelle, j’ai utilisé sobrement « under-beak » comme classe. Attention, comme vous voulez le positionner en dessous du bec, votre div doit être positionnée au dessus des deux divs du bec (vous pouvez aussi jouer avec les z-index mais je vous conseille d’éviter le plus possible) ! Ensuite on en fait simplement un rectangle rouge et on joue avec les border-radius pour donner cette forme particulière:

.under-beak {
	height: 20px;
	width: 15px;
	background-color: #A20000;
	position: absolute;
	top: 85px;
	left: 5px;
	border-radius: 20px 2px 8px 8px;
}

L’aile ou la cuisse

Pour l’aile, on va dessiner un rectangle transparent, arrondir ses coins inférieurs et n’afficher que les bordures inférieure et gauche. Ajoutez la div wing dans votre body, et dans votre CSS, écrivez:

.wing {
	width: 40px;
	height: 20px;
	border-radius: 0 0 10px 30px;
	position: absolute;
	top: 100px;
	left: 75px;
	border: 5px solid;
	border-color: transparent transparent #000 #000;
}

Pour les pattes nous devons également en avoir une devant le corps et une derrière, faites donc comme pour les yeux: une div leg/leg-right dans le body et une div leg en dehors du body, au dessus de celui-ci. On dessine ensuite simplement deux rectangles assez haut et avec les bordures supérieures et inférieures arrondies:

.leg {
	position: absolute;
	width: 10px;
	height: 30px;
	border-radius: 10px;
	left: 55px;
	background-color: #f0ba43;
	bottom: -35px;
}
.leg-right {
	left: 80px;
	background-color: #FFDA0F;
}

La touche finale

Nous allons donc pouvoir rajouter la crête et la queue de notre poule. Comme pour les deux il s’agit de formes répétées, on va simplement créer un élément pour chacun d’entre eux puis jouer avec les box-shadow. Ajoutez une div crest et une div tail dans votre HTML.

Les deux seront des rectangles avec les bordures supérieures arrondies et une bordure apparente pour avoir un effet de reflet comme pour le bec. Ensuite avec un transform on penche chacun d’entre eux et on duplique l’élément avec un box-shadow.

Une particularité pour la crête: pour avoir le reflet sur deux des éléments on va créer une shadow en plus, plus claire et décalée seulement de quelques pixels par rapport à l’autre. Ce qui nous donne ceci:

.crest {
	width: 30px;
	height: 40px;
	background-color: #A20000;
	border-radius: 40px 40px 0 0;
	position: absolute;
	top: -25px;
	left: 45px;
	border-left: 6px solid #D30700;
	transform: rotate(-10deg);
	box-shadow: 31px 14px 0 0 #A20000, 27px 14px 0 3px #D30700, 50px 30px 0 0 #A20000;
}
.tail {
	width: 30px;
	height: 70px;
	background-color: #A20000;
	border-radius: 40px 40px 0 0;
	position: absolute;
	top: 90px;
	right: -25px;
	border-right: 6px solid #D30700;
	transform: rotate(50deg);
	box-shadow: -23px -10px 0 0 #A20000;
}

Le petit plus: donner un peu de vie

Une animation très simple et que j’aime beaucoup mettre sur mes différents dessins CSS: le clignotement des yeux ! Il s’agit simplement de réduire la taille des yeux en adaptant la hauteur pour que le centre reste le même:

.eye {
	[...]
	animation: 8s chickenEye 1s infinite;
}
@keyframes chickenEye {
	2%{height: 7px;top: 54px;}
	4%{height: 15px;top: 50px;}
	6%{height: 7px;top: 54px;}
	8%{height: 15px;top: 50px;}
}

Et dans ma class eye j’active simplement l’animation au bout d’une seconde après le chargement de la page, et toutes les 8s ma poule clignera deux fois des yeux !

Voilà, vous savez désormais comment dessiner une poule en CSS ! Si vous voulez essayer d’autre illustrations, je vous conseille de faire un tour sur Dribbble où vous pourrez trouver des nombreuses idées de dessins de différentes difficultés en attendant notre prochain tutoriel !