Ressources du dimanche (27) : revue de code

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 !

J’ai choisi cette revue de code pour développer son code CSS, partager mes trouvailles et surtout suivre de près le Codevember de Codepen (à suivre dans ma liste).

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

modal-animation-catepeli-blog

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

Fluid Type on Blogs

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

slide-vuejs-catepeli-blog

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

codevember-catepeli-blog

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.

 

Laisser un commentaire

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

Categories:
Date:
  • 07/11/2016
Share:
%d blogueurs aiment cette page :