Peindre avec du code ? C’est possible !

Dessiner-code

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.

Ezgif.com-video-to-gif

Ezgif.com-video-to-gif (2)

Dessiner 1

Ezgif.com-video-to-gif (1)

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 !

Windmill

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

Ddfgdfg

 

 

 

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.

 

 

 

 

 

Fdsfsdfsdfsfsdf

 

 

 

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.Lawn

 

 

 

 


Ground
Le sol.

 

 

 

 

 

Le trapèzeTrapezoid

 

 

 

 

Triangle

 

 

Le triangle

 

 

 

 

Circle

Le cercle

 

 

 

 

WheelPour les ailes du moulin, j’ai utilisé le caractère « x », mais vous pouvez aussi utiliser des rectangles.

 

 

 

 

 

 

Keyframes

 

 

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 :

0 commentaires

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscription newsletter

Ne manquez plus nos derniers articles !