43 articles sur : exercices

Des « exercices » ou « web experiments » que je mets en place pour tester de nouvelles méthodes ou implementations web. Du jeu web au animation css. Teste tout ça.

Day12 : Curved text along a path with svg

•••

Jour 12, j’ai reçu une maquette il y a quelques jours d’un projet de site dans le quel il y avait des textes incurvés. La premiere idée serait d’utilisé du javascript comme arctext.js le faisait. Pour se moderniser et jouer avec le svg et le css j’ai découvert que l’on pouvait faire suivre un texte […]



Day 11 : slider en pure css

•••

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 […]



Day10 : buttons hover shadows

•••

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 […]



Day 09 : comics button

•••

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 […]



Day08 : random gradient background

•••

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 […]



Day 07 : infinite photo grid pure css slider

•••

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 […]



Day06 : rotate object at scroll

•••

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 […]



Day05 : rotate demi cercle with hover

•••

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 […]



Day04 : simple CSS rotate demi cercle

•••

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 […]



Day3 : Smoke svg animation

•••

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 […]





back home