Vous le savez sûrement, j’aime beaucoup poster mes projets sur Codepen. J’y passe donc beaucoup de temps, notamment pour chiner des idées innovantes de projets. Vous me connaissez, j’aime particulièrement les projets CSS. J’ai donc sélectionné pour vous les projets les plus impressionnants que j’ai trouvé récemment sur Codepen.
Cartoon or not ?
Commençons par un dessin, et pas des moindres. Ce cartoon réalisé par @miocene est non seulement très bien réalisé (dans un style assez retro type yoko tsuno) mais surtout animé. Le bruit est évidemment géré avec une image (trop compliqué à faire en CSS) mais le reste est 100% authentique, et l’effet fonctionne parfaitement.
Turning pages
Évidemment le CSS est incapable de gérer de la 3D poussée comme des formes arrondies. Cependant en agençant correctement quelques rectangles comme @amit_sheen et que vous les animez correctement, vous pouvez obtenir cet effet assez bluffant d’une page qui tourne. Dès que l’animation est terminée, l’élément se téléporte automatiquement sur la gauche pour donner cet effet de feuilletage infini.
No div car
Bon, celui là je suis très fan du principe. Vous connaissez sûrement le site a single div. Ici le challenge est autre: n’utiliser aucune div. Bon en réalité cela ne change pas grand chose, on utilise le body plutôt qu’une div, mais c’est pour la blague de ne rien avoir dans notre html. Nous nous accorderons cependant sur le fait que la prestation de @abxlfazl est impressionnante et que l’effet rend parfaitement bien. La technique est de se baser ici sur la propriété background qui permet d’ajouter autant de gradient que vous voulez en cumulé. Facile à dire, impressionnant quand réussi.
Loading goes off track
Dans ce pen assez rigolo de @jkantner, votre loader sortira d’un coup de sa route pour aller se cogner un peu partout. Bon ok, ici du SVG est utilisé afin d’obtenir cet effet. Mais je trouvais l’effet très sympa et ce genre d’animation ajoute vite de la vie à un projet, l’effet est donc validé.
3D Room
Je vous vois venir: oui il y a du Javascript. Mais ici le JS n’est utilisé que pour faire bouger la vue, le projet est bien uniquement en CSS. Dans ce projet de @ricardoolivaalonso vous retrouvez une petite ambiance cosy pour jouer à vos meilleurs jeux retro. Même si la comprehension de la 3D en CSS est assez simple, ici l’execution est bluffante avec une très belle gestion de la lumière et de l’espace.
Et c’est tout pour aujourd’hui. J’en ai encore quelques uns en stock afin de vous impressionner, promis. En attendant je vous propose d »affiner votre CSS avec ce tutoriel, et sinon à la prochaine.
