Un beau prototype de menu vertical responsive à plusieurs niveaux.
Comment effectuer des transitions sur les ombres proprement et avec de bonnes perfs.
Autre lien : https://lehollandaisvolant.net/?id=20170314183516
Le SVG semble être une excellente alternative au GIF lorsqu'il s'agit de formes géométriques pas trop complexes (difficile à faire avec une photo par exemple).
Au niveau du support, il y a malheureusement toujours IE8 qui ne prend pas en compte le SVG ( http://caniuse.com/#feat=svg ).
Mais il y a toujours des moyens de contourner cette absence de support : https://css-tricks.com/svg-fallbacks/
Un bon point à savoir pour récupérer prioritairement les polices depuis l'appareil de l'utilisateur si elles sont déjà installées, avant de décider de les télécharger.
Super intéressant, je ne connaissais pas les spécificités des contextes d'empilement créés par z-index.
Une foulitude de librairies CSS et JS pour créer des animations sexy, histoire de gagner du temps lors du développement de sites modernes.
Certains comme Transit par exemple utilisent la même API que jQuery.animate ce qui permet un fallback sur cette dernière pour les anciens navigateurs qui ne supportent pas les animations CSS.
Un framework CSS bien connu qui offre pas mal d'animations assez sexy. Et comme c'est du CSS, c'est optimisé et fluide sur tous les supports en principe.
Quelques limitations récurrentes du CSS finalement résolues grâce à l'utilisation de flexbox.
Le problème c'est qu'une fois que le contenu de la page atteint le bas, il passe derrière le footer (étant donné que le contenu en position: absolute est hors du flux d'affichage du document). Ou alors il faut connaître d'avance la hauteur du footer et appliquer une marge équivalente en bas du contenu mais ça perd un peu de son intérêt.
Google a sorti un framework CSS qui permet d'adopter assez facilement le Material Design. Il regroupe pas mal de modules et de styles prédéfinis.
Du coup ça rend à moitié caduc le projet que j'avais initié : https://github.com/kalvn/TinyMaterial
Emuler les pseudo-classes CSS dans IE6-8.
Personnalisation poussée des checkbox SANS Javascript. On peut même obtenir un comportement dynamique rien qu'avec du CSS et le sélecteur :checked.
Un très bon guide - très visuel - sur la propriété CSS3 de positionnement : flexbox. J'ai hâte que l'on puisse l'utiliser sans se soucier du support des navigateurs. Je pense qu'il faudra malheureusement patienter encore quelques années pour ça.
Un tableau HTML responsive en pur CSS et sans dupliquer les infos. Reste à voir le taux de support de l'attribut CSS "content: attr(data-label)".
Je ne connaissais pas la propriété "pointer-events" mais elle peut être bien pratique pour désactiver complètement un élément de l'UI avec "pointer-events: none;".
Bon par contre prudence, il s'agit d'une spécification CSS3 destinée à l'origine aux éléments SVG, et repoussée à CSS4 pour les autres éléments. Donc le support navigateur risque d'être chaotique.
Un framework CSS complet qui implémente les guidelines du Material Design. Il a l'air plutôt complet et reprend pas mal de bonnes choses de Bootstrap. Par contre il intègre beaucoup de plugins javascript ce qui risque d'induire une certaine lourdeur.
Plein de loaders 100% CSS. Ça a l'avantage d'éviter la lourdeur des gif et d'être ultra-fluide. Et bien sûr, ils sont personnalisable avec un peu de CSS.
Une foule de loading indicator à utiliser sur le web. Attention la page est chargée niveau contenu, ça peut prendre du temps.
Le framework CSS utilisé par Github.
Ça ressemble un peu à Bootstrap par endroits mais en grandement simplifié. Il y a notamment une section dédiée aux bonnes pratiques dont la lecture ne peut pas faire de mal.