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.
Les deux sont complémentaires !
Quelques guidelines pour CSS.
Quelques astuces pour charger efficacement vos scripts externes.
Enfin une propriété CSS pour tronquer le texte après un nombre défini de lignes.
Un outil de post-processing pour supprimer de vos fichiers CSS tout ce qui n'est pas utilisé. Très utile pour amaigrir les frameworks CSS type Bootstrap ou Bulma.