Des démos de ce qu'on peut faire en css au scroll

I want to share with you a quick way to make illustrations on your website work in both light and dark mode:

COPY

COPY
.dark .invert-on-dark {
filter: invert(1) hue-rotate(180deg);
}

Faire des blocs en diagonale sans que le texte déborde

On peut faire de super trucs avec les CSS et des masques

reset.css
A style reset that embraces modern CSS features to give you a better base to start off with.

Features
Designed for cascade layers while still using :where to keep a low specificity for unlayered setups.
Auto dark mode using color-scheme.
system-ui font pre-applied.
Accessible, consistent focus outlines.
.visually-hidden class baked in.

Méthodologie de création HTML/CSS à partir d'un fil de fer

Un système de calcul de couleur qui procure la même sensation de luminosité quelle que soit la teinte.

Une vue arborescente dépliable et repliable en pur HTML et CSS

Les CSS sont devenues un outil vraiment puissant !

C'est compliqué de faire un bloc (card) entièrement cliquable, accessible et avec son texte sélectionnable...

@media (prefers-reduced-motion: no-preference) {
img {
animation-play-state: running;
/ turn animations on if user doesn't mind /
}
}
@media not (update: fast) {
img {
animation-play-state: paused;
/ except, turn them off again if the browser can't draw them effectively anyway /
}
}

Il es maintenant possible (à partir de chrome 111) de faire une pendule analogique quasiment en pur CSS (juste un peu de JS pour décider de l'heure de départ)

With a unitless line-height, the value of the line-height is reevaluated for every single children based on said children’s font-size. Here the container is set to font-size:1rem; line-height:1.25. The <h1> gets a line height of 40px. The <p> gets a line height of 20px.

With a percentage line-height, the value of the line-height is evaluated once on the parent, and then applied at that exact same value for every children. Here the container is set to font-size:1rem; line-height:125%. The <h1> gets a line height of 20px. The <p> gets a line height of 20px.

Version moderne des CSS pour cacher un élément en le laissant accessible aux lecteurs écran.

Une façon moderne de faire varier la taille d'une police en fonction de la largeur d'un écran.

Une présentation très didactique de FlexBox et Grid dans une perspective de design adaptatif

Faire apparaître des notes de bas de page en position fixe en bas de l'écran. Brillant !

Exemple : https://atomicarchive.com/resources/documents/effects/glasstone-dolan/chapter1.html

Gérer les coupures de texte en CSS

Une formation complète aux CSS