C’est parti pour une revue de code pour lancer le mois de novembre. Du code issu de Codepen, la meilleure façon de partager son code, le tester et apprendre de nouvelles pistes. Donc je vous livre certains pen, dont certains sont issus de ma veille avec des recherches spécifiques que j’ai pu trouver et utiliser. Alors bon travail !
1 – Simple Responsive Table (CSS)
En premier sur ma liste, un exemple bien construit, bien fait pour le tableau en mode responsive. Et ceci tout en CSS, uniquement.
Voir le pen le tableau responsive en CSS
2 – CSS Stopwatch with lap function
Voici un travail très intéressant pour la construction du chronomètre sans aucune ligne de javascript ! D’une part le HTML, via des input et la balise <time> le décompte s’affiche, puis par les CSS, l’animation. Le pouvoir des CSS !
Voir le pen le chronomètre avec la fonction Tour
3 – Quick Modal Animation Test
Voici un type de fenêtre modale codée from scratch avec une petite animation sympa. Un élément utile pour bien mettre en forme une petite popin et la faire disparaitre avec élégance.
Voir le pen Quick Modal Animation Test
4 – Coloron Game
Un jeu inspirant, qui donne un fantastique exemple pour utiliser les animations avec des SVG, ES6 (via Babel pour la compatibilité) et les flexbox.
Voir le Coloron Game
5 – Fluid Type on Blog de Chris Coyier
Un article sous forme de tuto pour gérer nos typographies en responsive. Passer d’un device de desktop à un device de smartphone, cela peut être délicat dans la gestion des fonts. Donc voici un bon exemple à suivre selon vos besoins.
Lire l’article de Chris Coyier
6 – Slide Portfolio CSS
Un petit cas de mise en contexte pour le portfolio, un effet pur CSS d’une simplicité évidente et utile.
Voir le pen Slide Portfolio CSS
7 – Vue2 page transitions with GSAP
Voici 6 transitions de slides avec Vuejs et GSAP. De quoi découvrir la joie d’utiliser le framework Javascript et GSAP.
Voir le pen Vue2 page transitions with GSAP
8 – CSS active tracking Slider
Voici un exemple simple et efficace pour passer d’un onglet à l’autre, sans ligne de javascript et très bien fait.
Voir le pen CSS Active Tracking Slider
9 – Codevember
Et surtout voici donc le Codevember, un challenge pour les développeurs pour partager des pens pour plein de possibilités en HTML, CSS, WebGL, Javascript etc….. et ce, chaque jour de novembre.
Check out the official site for more details.
Alors « Happy coding! »
Voir Codevember
Voici ma sélection de pens, une sélection personnelle que j’ai pu tester ces derniers jours, en espérant que, comme pour moi, cela pourra vous aider et vous inspirer de nouvelles lignes de code.