Un guide visuel pour la plupart des propriétés CSS. A avoir sous la main si vous avez un doute :)
Quelques astuces pour une feuille de style d'impression de qualitayyy.
Un système de grid CSS ultra-simple qui utilise la puissance de flexbox. Et aussi un logo avec des zizis.
Des snippets CSS :)
Un article très intéressant à propos de la gestion de l'espace lors du design d'une page web. On y pense malheureusement souvent assez peu mais ça peut avoir un impact capital sur la lisibilité et sur le ressenti de l'utilisateur.
D'autres bonnes pratiques pour les formulaires d'inscription.
Via https://blog.stephaniewalter.fr/la-semaine-en-pixels-7-octobre-2016/
Comment utiliser les dégradés CSS modernes.
Une autre lib JS pour gérer les animations CSS en JS.
Quelques loaders animés en CSS.
Changer la façon dont le texte se positionne autour d'un float.
Un site qui permet de vérifier quelles polices d'écriture sont dispo sur chaque système et quelle police sera utilisée si celle que vous spécifiez n'est pas incluse.
Un exemple de ce qu'on peut faire grace à la propriété CSS background-attachment.
Une lib Javascript pour animer les gradients CSS.
Un petit topo sur les performances et l'optimisation des animations CSS. En outre, on y montre comment visualiser tout ça avec les outils de développement.
Une librairie Javascript pour faire des animations au scroll.
Comme dit dans la source, attention à ne pas en abuser, et surtout attention à mettre un timer suffisamment court. Il n'y a rien de plus chiant que les sites sur lesquels il faut attendre 2 secondes à chaque scroll pour que le contenu apparaisse.
Via https://blog.stephaniewalter.fr/semaine-pixels-19-aout-2016/
tl;dr
Un tuto qui a l'air très complet sur le HTML et le CSS. Il y a une version débutant et une version avancée.
Une librairie qui permet de construire des animations CSS purement en JS. C'est assez intéressant dans le sens où ça combine la flexibilité des animations jQuery de la vieille époque avec l'optimisation et la rapidité des animations CSS modernes.
Et comme la fonction attend un objet Javascript, c'est assez facile de définir quelques animations et de les réutiliser.
Le repo Github est ici : https://github.com/juliangarnier/anime
Astuce intéressante (astuces au pluriel en fait, il y a plein de versions différentes) pour forcer un contenu à prendre toute la largeur du viewport même si il est contenu dans un container à taille limitée. Très utile pour les images par exemple.
Pour ma part si je veux faire ça j'utilise un bloc dédié mais ce n'est pas toujours possible quand on utilise un CMS par exemple, et qu'on veut insérer une image dans le texte.
Un article intéressant qui remet en question l'adoption de l'unité "em" ou "rem" partout.