Dessiner en CSS : les formes

CSS spaceship

Depuis quelques mois je participe régulièrement aux CodePen Challenges. Il s’agit de petits challenges hebdomadaires regroupés autour d’un thème mensuel. Par exemple en juillet le thème était l’espace et il fallait par exemple faire un Pen avec une étoile ou avec un vaisseau. Et quand comme ici le sujet s’y prête, c’est l’occasion pour moi de reproduire des illustration en CSS. Vous pouvez trouver plusieurs exemples d’illustrations sur mon profil Codepen pour avoir un aperçu de ce qui est faisable. Dans cette série de tutoriels, nous allons donc apprendre ensemble à dessiner en CSS !

Et puisqu’il faut bien commencer par les bases, nous allons nous contenter aujourd’hui de voir les différentes formes faisables en CSS !

Les évidents : le rectangle et le rond

Bon, à moins de n’avoir jamais touché au CSS normalement vous avez déjà une petite idée de comment faire:

Les bases: un carré et un rond
Les bases: un carré et un rond
.square {
	height: 70px;
	width: 70px;
	background-color: #000;
}
.round {
	height: 70px;
	width: 70px;
	border-radius: 35px;
	background-color: #000;
}

Notez par contre une chose au niveau du rond, j’ai ici mis son border-radius à 35px ce qui correspond à la moitié de sa hauteur/largeur. Pour obtenir le même effet vous pouvez vous contenter de mettre « 50% », ce qui est plus court à écrire, vous évite le calcul mais surtout vous permet de changer la taille de votre élément par la suite sans avoir à modifier son radius. En revanche dans le cas d’un ovale, les résultats ne sont pas les mêmes !

Prenez par exemple le cas d’un ovale de 50px/70px:

Différence entre px et %
Différence entre px et %
.r1 {
	height: 70px;
	width: 50px;
	border-radius: 35px;
	background-color: #000;
}
.r2 {
	height: 70px;
	width: 50px;
	border-radius: 50%;
	background-color: #000;
}

En fait, le premier ovale va garder le même arrondi que le rond de tout à l’heure alors que le second va appliquer 25px de radius sur le dessus (50% de la largeur) et 35px sur les côtés (50% de la hauteur) pour avoir un effet totalement arrondi. Vous pouvez remplacer les pourcentages par border-radius: 25px / 35px; pour obtenir le même effet !

L’oeuf

Cette façon d’écrire les border-radius permet de préciser avant le slash le radius horizontal et après le slash le radius vertical. Et c’est en se servant de cette séparation que vous pouvez obtenir une forme d’oeuf:

Dessiner un oeuf en CSS
.egg {
	width: 80px;
	height: 100px;
	background-color: #000;
	border-radius: 50% / 60% 60% 40% 40%;
}

Ici, nous laissons un arrondi normal sur le dessus et le dessous de l’oeuf pour laisser l’axe vertical au centre. En revanche, nous augmentons l’arrondi sur les côtés des deux coins supérieurs et le diminuons sur les côtés des deux coins inférieurs pour descendre l’axe horizontal et obtenir une forme d’oeuf !

Notez aussi que de chaque côté du slash vous pouvez utiliser les shorthands des radius (écrire « 50% » pour l’appliquer partout au lieu d’écrire quatre fois !

Le triangle

Le triangle est un peu moins facile à appréhender : il faut commencer par dessiner un carré de 0x0 puis une bordure tout autour. Il vous suffit ensuite de ne laisser qu’une seule des 4 bordures visibles en fonction de la direction que vous voulez donner à votre triangle:

Triangles en CSS
En gris clair, deux types de triangles possibles
.t1 {
	height: 0;
	width: 0;
	border: 50px solid #000;
	border-bottom-color: #ddd;
}
.t2 {
	height: 0;
	width: 0;
	border: solid #000;
	border-width: 50px 50px 20px 50px;
	border-left-color: #ddd;
}

Comme vous pouvez le voir sur le second triangle, vous pouvez jouer avec les tailles de bordures pour obtenir différents types de triangles ! J’ai ici laissé la bordure en noir pour bien se rendre compte d’où sort le triangle mais dans un vrai cas d’utilisation, laissez la en transparent par défaut.

Depuis les triangles, vous pouvez facilement dessiner des trapèzes en utilisant exactement la même méthode:

Dessiner un trapeze
.trapeze {
	height: 0;
	width: 60px;
	border: 50px solid #000;
	border-bottom-color: #ddd;
}

Le parallélogramme

Pour le parallélogramme vous avez deux méthodes : soit créer un rectangle et ajouter un triangle de chaque côté, soit créer un rectangle et… le pencher ! Il existe effectivement une propriété CSS peu utilisée qui permet de simplement pencher un élément : le skew !

Un parallélogramme
.parallelogram {
	height: 50px;
	width: 80px;
	background-color: #000;
	transform: skewX(-20deg);
}

La griffe

Ça ne parait pas forcément, mais c’est un élément dont j’ai eu besoin plusieurs fois quand je faisais des dessins en CSS. Il s’agit simplement d’un rond transparent avec une bordure dont on varie la taille et la couleur de façon à obtenir un effet de « pic »:

Griffe en CSS
.claw {
	height: 80px;
	width: 80px;
	border-radius: 50%;
	border: solid;
	border-width: 10px 10px 0 0;
	border-color: transparent #000 transparent transparent;
}
CSS Chicken
Une poule en CSS

Et c’est à peu près tout ce dont vous avez besoin pour reproduire la plupart des dessins que j’ai réalisé sur mon CodePen. Ensuite, il suffit de comprendre de quelles formes vous avez besoin et de jouer avec les tailles, les arrondis et les rotate et le tour et joué ! Si vous ne voyez pas encore bien comment faire, pas de panique: dans le prochain tutoriel de cette série nous apprendrons ensemble à dessiner une poule en CSS ! En attendant vous pouvez vous amuser à créer des icons en CSS !

Laisser un commentaire