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.
Un outil pour créer des palettes de couleur cohérentes et accessibles. Très bien foutu !
Plus de 500 icônes en pur CSS. Pratique quand on en a juste besoin de quelques unes.
Via https://korben.info/500-icones-a-integrer-en-css-dans-vos-projets.html
Un générateur d'ombre CSS.
Quelque idées pour facilement organiser vos classes CSS.
J'utilise notamment la première, la notation .is-open pour les classes d'état, je trouve ça très clair et très pratique, surtout quand vous utilisez SASS.
Encore un petit article sur CSS Grid.