Peindre avec du code ? C’est possible !
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.
Pour commencer, nous devons délimiter une section principale pour notre image, la positionner et définir sa largeur et sa hauteur.
Ensuite, nous allons ajouter la pelouse.
Le sol.
Le trapèze
Le triangle
Le cercle
Pour les ailes du moulin, j’ai utilisé le caractère « x », mais vous pouvez aussi utiliser des rectangles.
Ensuite, nous allons animer nos ailes.
Et voilà !
Merci d’avoir lu ce billet, j’espère qu’il vous aidera à réveiller l’artiste qui sommeille en vous ! ?
Ressources et exemples supplémentaires :