août 2020 | Quentin Renaux

Day 11 : slider en pure css par catégories

< if content: />

Jour 11, Je m’intéresse depuis un moment à la réalisation d’un slider en pure css et pour une cliente j’avais besoin de faire des transitions « fade in fade out » sur environ 5 slides de ses images.

Ici J’utilise 5 détails d’une fresque de Derudder design
Le slider est en autoplay
Le code est inspiré de Ben Schwarz
la partie responsive pourrait être amélioré

Voici le résultat : quentinrenaux.com/xp/1day1code/galerie-css-moi/

Day10 : buttons hover shadows par catégories

< if content: />

Jour 10 de l’auto challenge, dur d’ouvrir l’ordi en vacances, ca devient un reflex avant la plage ou entre deux verres.

Aujourd’hui on continu à triturer les boutons et les hovers en css, on va jouer avec les shadows et changer leurs effets quand la sourie passe au dessus du bouton.

Ça nous donne des lignes qui traversent notre boutons, des cercles jaunes qui apparaissent au survole de la sourie, un effet brillant métallique et un zoom année 80 en noir et blanc un peu psyché.

Pour découvrir ces 4 boutons : https://quentinrenaux.com/xp/1day1code/buttons2/

Day 09 : comics button par catégories

< if content: />

En ce jour 9 de l’auto challenge (on pourrait l’appeler #1day1code ou #100daysofcode) je me suis penché sur le design de bouton web (button), le rendre comics style. Pop style. Avec un très jolie dégradé derriere.

Les parties interessantes de ce bouton sont les balises :before et :after qui viennent constituées le volume du bouton avec à la fonction transform()

Le résultat ici : https://quentinrenaux.com/xp/1day1code/button-boxed/

Day08 : random gradient background par catégories

< if content: />

8ème jour de l’auto challenge et bien arrivé à Belle ile en mer.

Réaliser un fond de page qui change de couleur à chaque chargement ou clique sur l’icon central, plus qu’un changement de couleur, chaque chargement génère un paterne de couleurs qui se mélange aléatoirement.

A voir et essayer ici : quentinrenaux.com/xp/1day1code/random-gradient/

Ps: j’ai mis en place ce background sur une page de mon site : quentinrenaux.com/thisiscolor

Day 07 : infinite photo grid pure css slider par catégories

< if content: />

En ce 7ème jour de mon auto-challenge et en direct du train m’amenant de la Bourgogne à la Bretagne.

Dans l’optique de réaliser une séries de sliders et carousels durant ce challenge j’ai réalisé un premier carousel en boucle infini, qui pourrait être utiliser en background d’un site pour montrer son univers.
Le tout avec uniquement du css

Voici le résultat : quentinrenaux.com/xp/1day1code/infinite-photo-grid/
(les photos sont des photos de banque d’image, j’ajouterais surement ce code à mon propre site en background d’une page full screen qui redirigerait vers mon instagram)

Le trick de cette page: un assemblage de photos sur une plus grande image en panorama qui defile de droite à gauche avec une animation en css pour la faire tourner en rond.

Day06 : rotate object at scroll par catégories

< if content: />

6ème jour, et 2ème de la campagne (vacances + challenge = bon rythme).
Je code donc le matin avant que tout le monde se lève. Mon but du jour était de rendre un objet rotatif lors du scroll de ma page et d’acheter 7 croissants et pains au chocolat avant que quelqu’un n’ait ouvert les yeux.

Hier et avant hier j’ai joué à faire tourner un demi cercle, aujourd’hui se sera un smiley à trois yeux sur fond vert fluo avec un léger dégradé sur une hauteur de 6000px pour bien se rendre compte de la rotation.

→ Voici le résultat : https://quentinrenaux.com/xp/1day1code/rotate-object/

Avec ce genre de code on peut imaginer de petite animations sur les logos / menus afin de donner un caractère fort et inédit au site que l’on réalise.

(revoir day04 et 05 qui concernent eux aussi la rotation d’objets en css)

Day05 : rotate demi cercle with hover par catégories

< if content: />

En direct de la campagne (enfin les vacances!), entre deux salades de fruits. Je souhaite respecter mon challenge d’un petit code par jour, j’ai donc amélioré celui d’hier avec les retours que vous m’avez fait: « ce serait sympa qu’il se passe un truc lorsque l’on passe la sourie sur les cercles »

J’ai donc ajouté deux choses:
un mousse hover sur les formes géométriques
et un pointer progress (parce que ca tourne aussi 🙂

le résultat : https://quentinrenaux.com/xp/1day1code/rotate-demicercle2

Day04 : simple CSS rotate demi cercle par catégories

< if content: />

Jour 05 de l’auto challenge d’un petit code d’experimentation html css par jour.

Aujourd’hui pour preparer le #DAY05 ou 06 où il sera question de faire tourner sur lui meme une forme géométrique, une image ou un texte au scroll de la page j’aimerais d’abords réaliser une forme géométrique simple qui tourne sur elle même en pure css.

Ça nous rappellera les 40 cercles tournant à vitesses différentes du DAY02
Pour plus de fun la rotation de ce demi cercle pourrait s’accélérer ou s’arrêter au passage de la souris (mousse hover)

Pour réaliser on utilisera la fonction border-radius() et transform: rotate()

voir le rendu : quentinrenaux.com/xp/1day1code/rotate-demicercle

Les plus:

le cercle tourne en 4secondes,
un léger dégradé en background avec la function: linear-gradient()
mon site préféré pour faire mes selections de couleurs, rapide : htmlcolorcodes.com/fr/

Day3 : Smoke svg animation par catégories

< if content: />

Depuis maintenant 3 jours je réalise une experimentation de code chaque jour, parfois j’ai plus de temps et parfois j’en ai moins mais j’essaye de quand meme poster une chose. Le tout afin d’améliorer ma réactivité et mes skills.

Aujourd’hui je manquais de temps mais je voulais tester un bout de code simple d’une sequence d’images en svg qui me permettrait de créer une animation au chargement de la page sur une image, ici avec de la fumée.

En fond une magnifique photo de mer de Trevor Pottelberg vu sur bored panda
La sequence d’images SVG se présente comme ça : (voir la séquence d’img)

On pourrait s’imaginer ça sur tout un site, avec d’autres sequences d’images ou quand le trigger (du scroll arrive sur l’image en question, etc…)
la semaine prochaine je vais animer une image svg au scroll pour la premiere fois d’ailleurs (keep in touch)

→ Le résultat final avec l’animation au chargement et le code donne ca :
https://quentinrenaux.com/xp/1day1code/smoke

ps: je reviendrais sur certaines parties de cette page dans les prochaines experimentations pour ajouter un peu plus d’explication sur le code qui utilise aussi gspa pour l’animation.

edit: D’ailleurs j’ai remarqué de légers bugs en postant la page à l’instant
et je ne l’ai pas tester sur mobile – PAS BIENNNNNNN
J’aurais aussi pu ajouter un bouton pour rafraichir plus facilement la page 🙂

Pourquoi utiliser du SVG plutôt qu’une video ou qu’un gif ? car le SVG est super légé, qu’on peut le manier/animer avec du code, et qu’il n’a pas de pixellllls

Day 02 : Infinit hypnotic rotate in css par catégories

< if content: />

Deuxième exercice de l’auto-challenge
Avec comme but de me permettre d’améliorer mes skills de codeur et designer web ainsi que ma vitesse de réaction. Je vais donc coder une petite chose chaque jour durant les 60 prochain jours, voici DAY 02:

Pour ce deuxième jour j’ai simplement voulu faire tourner plein de cercles les uns sur les autres afin de voir ce que ca allait donner, un peu comme le smiley qui est souvent en haut a gauche des pages de ce site.

Pour simplifier le tout et tester le site codepen.io, j’ai réalisé ce deuxième exercice sur codepen, avec seulement de l’html et du css.

Voici le lien du codepen : codepen.io/quentin-renaux/pen/yLemdXw
J’ai remis le tout sur mon site (qui charge plus rapidement) : quentinrenaux.com/xp/1day1code/rotate

En apprendre d’avantage sur la function rotate() ici : developer.mozilla.org/fr/docs/Web/CSS/transform-function/rotate