Une timeline en CSS.
Le guide ultime pour comprendre CSS Flexbox selon moi (et j'en ai lu un paquet). C'est en anglais et relativement long, mais tout y est, mêmes les nouveautés comme la propriété gap ou les subtilités comme margin: auto.
J'ai découvert 2 ou 3 trucs que je ne connaissais pas alors que je suis un très gros utilisateur de Flexbox.
J'ai beaucoup de mal avec les framework CSS dit utility-first type Tailwind et consorts. Le HTML est souvent surchargé de classes cryptiques et devient donc difficile à lire. Sans parler du risque de ne pas "nettoyer" correctement le CSS final et donc d'embarquer des méga octets de CSS inutile.
Mais je dois admettre que l'approche proposée par UnoCSS est séduisante. Le nettoyage est fait à la volée et il fonctionne par "presets". On peut donc importer les règles que l'on veut, et créer nos propres règles facilement.
À essayer...
Une lib de composants compatibles avec React, Vue, Svelte, Angular et même du pur JS. J'imagine même pas le boulot de maintenance que ça représente 🙃
Quels sont les breakpoints les plus populaires.
Un outil pour générer des animations CSS3 via une interface graphique. Il existe aussi une lib JS qui permet de faire la même chose dynamiquement en JS.
A game for learning CSS grid layout
100 animations hover en CSS. Histoire de change du classique changement de couleur ou soulignement.
Les frameworks CSS orientés utility classes (type Tailwind) ont le vent en poupe. J'avoue avoir du mal avec ce concept pour le moment.
Ce qui est souvent reproché à ce type de frameworks c'est le fait que ça reviendrait à écrire du CSS inline. Cet article explique que c'est faux. Et les arguments avancés tiennent la route.
Reste qu'on se retrouve quand même avec quelques contraintes :
A voir comment ça évolue.
Quelques astuces CSS avancées.
CSS tips and tricks you will not see in most of tutorials.
De très bons conseils pour intégrer du texte par dessus une image et s'assurer qu'il reste bien lisible.
Learn how to handle text over images in CSS by taking accessibility in mind
Tout est dans le titre :)
Cet article est très didactique, parfait pour bien comprendre les transitions CSS. Il n'aborde cependant pas les animations CSS à proprement parler.
Afficher un bloc sur toute la largeur de votre site alors qu'il est contenu dans un bloc qui a une largeur limitée.
Astuce, utiliser les unités relatives au viewport :
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}Bigrement intéressant ! (oui oui, j'ai dit "bigrement")
De nouvelles APIs devraient bientôt nous permettre d'avoir accès en profondeur à la manière donc notre navigateur affiche les sites web. Du CSS boosté aux hormones en somme !
Une chouette introduction aux animations CSS en utilisant des path SVG.
Une sorte de micro framework CSS qui tient en quelques lignes. Parfait pour débuter vos projets.