Si vous rêvez du "container query" , @heydon a créé un "custom component" qui utilise l'API ResizeObserver pour en simuler un ! 🎉
github.com/Heydon/watched-box
J'ai aussi vu passer ce bac à sable de @sturobson@twitter.com aussi qui peut aider à comprendre le fonctionnement
codepen.io/sturobson/project/l

Dans quel ordre s'applique les propriétés de transformation : `translate`, `rotate`, `scale`, `offset`, etc.
danielcwilson.com/blog/2020/02
Et oui, `offset` et notament `offset-path`, qui permet de définir un tracé de mouvement non-linéaire à l'aide de coordonnées .

Vous pouvez utiliser la propriété `scroll-margin-top` pour empêcher votre contenu de passer sous une entête fixe lors d'une navigation vers une ancre
gomakethings.com/how-to-preven
Et en plus c'est plutôt bien supporté <3

Si vous voulez vous amusez un peu, voici un article pour générer des images de fond à l'aide de l'API Paint (Houdini)
blog.logrocket.com/how-to-crea

Sara Soueidan démystifie les filtres que l'on applique grâce à la propriété `filter` lors d'un conférence d'une heure
aneventapart.com/news/post/svg

BEM Cheat Sheet - Un bien jolie page pour expliquer BEM par la pratique <3 <3
9elements.com/bem-cheat-sheet/

Si vous vous posez des questions sur le système de couleur LCH, @leaverou@twitter.com a écrit un long article pour expliquer son intérêt
lea.verou.me/2020/04/lch-color

Show thread

Vous pouvez faire un effet de coin arrondis et plié à l'aide de la propriété `clip-path` <3
codepen.io/joshwcomeau/pen/VwL

Quand j'entends “De toute façon, les CSS n'ont pas vraiment bougées ces dernières années, je veux dire à part Flexbox et CSS Grid”, je pense à ce genre de code.
Emprunté ici : webkit.org/blog/10042/wide-gam

Le module Motion Path de niveau 1 introduit la possibilité à des éléments de suivre un parcours défini <3
alsacreations.com/tuto/lire/18
Par @goetter@twitter.com

En attendant le support de propriété `text-underline-offset`, vous pouvez déjà utiliser `text-underline-position` sous la ligne de base, à une position où elle ne traversera pas de jambage
webplatform.news/issues/2020-0

Une proposition de spécification pour pouvoir définir une animation par le temps, oui chaque étape est définie en secondes.
github.com/w3c/csswg-drafts/is
Pour moi, c'est un grand oui \o/ N'hésitez pas à réagir pour lui donner de la visibilité si ça vous intéresse

Petit effet "Wahoo" du jour avec un effet papier/crayon en , alors que j'aurais parié que ce n'était pas possible !
heredragonsabound.blogspot.com

Deux nouvelles fonctions arrivent pour déclarer des couleurs. Elles sont principalement basées sur la luminosité. Ce sont `lab()` et `lch()`, des concurrentes à `rgb()` et `hsl()` donc !
drafts.csswg.org/css-color-4/#
Elles sont actuellement en développement sous Firefox, Safari, et Chrome

Faire ce type d'effet en , c'est possible avec 3 propriétés !
Avec l'outil pour le générer, c'est quand même plus simple 😉
neumorphism.io/#55b9f3

Savez-vous que c'est possible de faire des `srcset` directement en pour les images de fonds ?
C'est avec la propriété `image-set`.
developer.mozilla.org/en-US/do
Par contre ce n'est pas supporté par Firefox pour le moment :(

Si vous êtes joueurs, ou si vous n'aimez pas vos collègues, voici comment fonctionne la propriété raccourcie `font`
codepen.io/marcobiedermann/pen

Show more
L'instance Mastodon de tzi

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!