Peindre avec du code ? C’est possible !

Sep 16 2020

Vous souvenez-vous de la dernière fois où vous avez codé avec plaisir et motivation, sans stress ? Et de votre première ligne de code ? Qu’avez-vous ressenti à ce moment ?

Vous avez probablement pensé que vous veniez de faire quelque chose d’inédit, d’unique, même s’il s’agissait simplement d’un message « hello world » affiché sur la console. Pour vous, cet instant était magique ?.

En tant que développeurs, nous oublions parfois ce sentiment dans notre quotidien composé de problèmes à résoudre, de bugs à corriger, de fonctionnalités à programmer, de merge requests à faire, de fonctionnalités à livrer, etc. La magie se perd.

Aujourd’hui, je vous propose de retrouver cet aspect ludique et enivrant en essayant quelque chose d’insolite : faire de l’art en CSS.
Si vous faites partie de ceux qui détestent le CSS et si, en voyant le mot « CSS », vous vous êtes tout de suite rappelé combien il est difficile d’aligner des éléments à la verticale ou de les centrer avec ce langage, laissez derrière vous toutes ces pensées négatives : nous allons voir comment le CSS peut s’appliquer à l’art et comment vous pouvez l’utiliser pour créer des choses amusantes et esthétiques.

Les animations ci-dessous sont quelques-unes de mes créations en purs HTML et CSS.

QUEL EST L’INTÉRÊT DE CETTE DÉMARCHE ?

Tout d’abord, c’est en forgeant qu’on devient forgeron : si vous n’excellez pas en CSS, c’est le moment idéal pour vous lancer dans cet exercice artistique ! Vous apprendrez plein de choses en créant des éléments insolites et vous vous améliorerez. C’est également une bonne source d’inspiration qui vous encouragera à développer vos connaissances en CSS. Cela vous aidera aussi à voir les images et à décomposer les choses de façon modulaire, comme vous le faites déjà avec les applications web. En créant des visuels en CSS, vous réfléchirez davantage à la manière dont vous organisez votre code. Et surtout, c’est amusant.

LES OUTILS POUR PEINDRE AVEC DU CODE

Pour vous lancer dans cet exercice artistique en CSS, vous aurez peut-être besoin d’outils comme :

Un espace pour programmer, par exemple votre ordinateur ou une plateforme en ligne telle que CodePen ;
Un sélecteur de couleurs: quand vous dupliquez des visuels en CSS, il est toujours utile de choisir les bonnes couleurs (ex : extension Chrome ColorZilla) ;
Un outil pour mesurer les pixels (ex : extension Chrome PageRule).

ET MAINTENANT, DESSINONS QUELQUE CHOSE ENSEMBLE !

Vous l’avez deviné, nous allons dessiner un moulin à vent.

Nous utiliserons uniquement des éléments HTML div, comme vous pouvez le voir dans le code. Chaque élément de notre dessin sera un div dans notre HTML.