L’article explore les possibilités créatives offertes par la propriété CSS shape-outside, qui permet de faire épouser le flux de texte aux contours d’une image ou d’une forme personnalisée, au lieu de se limiter à un rectangle classique. L’auteur illustre son propos avec des exemples concrets, comme un site web pour une artiste de country fictive, Patty Meltt. Il montre comment utiliser shape-outside pour créer des mises en page dynamiques et immersives : text wrapping autour de portraits, d’instruments de musique, ou même de montages photo, en jouant avec les canaux alpha des images ou des clip-path. L’article détaille aussi des astuces pour simuler un centrage d’image ou contourner les limites des rotations CSS. L’objectif ? Rendre les longs contenus visuellement plus engageants et moins statiques, en intégrant images et texte dans une composition harmonieuse. Des exemples interactifs sont disponibles dans un lab en ligne pour expérimenter ces techniques. Une lecture inspirante pour les designers et développeurs web cherchant à ajouter du mouvement et de la personnalité à leurs layouts.

John Rhea explique comment il a recréé l’animation du bouton Google Gemini de Gmail en utilisant uniquement du CSS, notamment la fonction shape() et des animations. L’animation originale montre une étoile à quatre branches qui tourne et une forme extérieure se transformant entre plusieurs formes (fleur, cylindre, hexagone, cercle) tout en tournant. Rhea détaille sa méthode : il a dessiné les cinq formes dans un logiciel vectoriel, veillant à ce qu’elles aient le même nombre de points d’ancrage pour permettre une interpolation fluide entre elles. Il a ensuite converti ces formes en syntaxe CSS shape(), défini des variables CSS pour chaque forme, et utilisé des transitions et des @keyframes pour animer la rotation, le changement de couleur et la morphose entre les formes. Le résultat final reproduit fidèlement l’effet visuel du bouton Gmail, avec une approche purement CSS et sans JavaScript. Un projet ludique qui met en lumière les possibilités créatives des nouvelles fonctionnalités CSS.

L’article s’intéresse à la fonctionnalité CSS la plus décriée selon le State of CSS 2025 : les fonctions trigonométriques, notamment sin() et cos(). Pourtant, ces fonctions offrent des usages pratiques et créatifs, comme la création de dispositions circulaires (placer des éléments autour d’un cercle), des layouts ondulés (effets de vagues ou entrelacs), ou encore des animations amorties (mouvements réalistes de ressorts ou de pendules). L’auteur explique leur principe via le cercle unité et montre comment les utiliser en CSS pour des effets visuels dynamiques, sans recourir à des valeurs magiques. L’objectif ? Réconcilier les développeurs avec ces outils souvent perçus comme complexes, mais en réalité puissants et accessibles. Une invitation à explorer leur potentiel au-delà des préjugés !

Ce tutoriel explique l’utilité des pseudo-classes fonctionnelles en CSS pour cibler des éléments de manière plus efficace et lisible :

• :is() : Permet de regrouper plusieurs sélecteurs (logique OU) pour appliquer les mêmes styles, réduisant la redondance.
  Exemple : :is(h1, h2, h3) { color: [#333](https://raphael.salique.fr/liens/./add-tag/333); }

• :not() : Exclut un élément d’une sélection, utile pour appliquer des styles à tous sauf à quelques exceptions.
  Exemple : li:not(:last-child) { border-bottom: 1px solid [#ccc](https://raphael.salique.fr/liens/./add-tag/ccc); }

• :where() : Similaire à :is(), mais avec une spécificité nulle, idéal pour des styles de base facilement surchargeables.
  Exemple : :where(header, main, footer) { margin: 1rem 0; }

• :has() : Cible un élément parent en fonction de ses descendants, une nouveauté puissante pour des sélections contextuelles.
  Exemple : article:has(img) { border: 2px solid red; }

Ces sélecteurs améliorent la concision et la maintenabilité du code CSS.

Dans cet article, Andy Clarke explore le concept d’animations ambiantes : des mouvements subtils et lents qui apportent de la vie à un design sans distraire l’utilisateur. Contrairement aux animations interactives ou narratives, les animations ambiantes se fondent dans l’arrière-plan, créant une atmosphère discrète mais immersive. Clarke illustre son propos en transformant une couverture de comic book statique en une animation CSS/SVG où les éléments (plumes, fumée, expressions) s’animent de manière naturelle et presque imperceptible. L’objectif ? Renforcer la personnalité d’une marque ou d’un projet sans nuire à l’expérience utilisateur, en privilégiant des transitions douces, des boucles fluides et une approche minimaliste.

L’auteur partage des conseils pratiques : privilégier les éléments qui bougeraient naturellement (feuilles, fumée, ombres), éviter les mouvements brusques, et respecter les préférences utilisateur (comme le mode prefers-reduced-motion). Il insiste sur l’importance de la modération et de la performance, en utilisant des SVG bien structurés et du CSS optimisé. Un exemple concret et un démo CodePen accompagnent l’article, montrant comment ces micro-interactions, bien dosées, ajoutent de la profondeur et du charme à un design.

Josh W. Comeau analyse la nouvelle règle CSS @starting-style, qui permet d’utiliser des transitions pour animer l’apparition d’éléments (ex: fondu, déplacement), là où on utilisait avant des @keyframes.

Le piège :
Contrairement aux @keyframes, les styles définis dans @starting-style ne sont pas prioritaires et peuvent être écrasés par des sélecteurs plus spécifiques (ID, styles inline). Résultat : l’animation ne se déclenche pas.

Exemple :
Un bouton génère des particules avec une transition sur transform. Si la position finale est définie en JavaScript (style inline), @starting-style est ignoré.

Solutions :

• Forcer avec !important (peu maintenable),
• Utiliser des variables CSS pour égaliser la spécificité,
• Revenir aux @keyframes, plus simples et compatibles.

Verdict :
@starting-style est pratique, mais les @keyframes restent souvent plus fiables.

L'article explique que OKLCH est un modèle de couleur conçu pour être perceptuellement uniforme, c’est-à-dire que les variations de ses valeurs (Lightness, Chroma, Hue) correspondent mieux à la façon dont les humains perçoivent les couleurs. Contrairement à des modèles comme RGB ou HSL, OKLCH permet de créer des palettes de couleurs cohérentes en luminosité et en intensité, même en changeant seulement la teinte ou la clarté. Il évite les déformations de couleur lors de la création de dégradés ou de nuances, et supporte une gamme de couleurs plus large que le sRGB, notamment sur les écrans modernes (Display-P3). Bien que compatible avec les navigateurs récents, il est conseillé de prévoir des alternatives pour les anciens navigateurs. Un outil comme oklch.fyi facilite la génération et la conversion de palettes OKLCH. Idéal pour les designers et développeurs cherchant plus de précision et de cohérence visuelle.

CSS Elevator est un projet ingénieux démontrant comment créer une machine à états interactive (un ascenseur) en CSS pur, sans JavaScript. L’auteur utilise des variables CSS personnalisées (via @property), des compteurs, la pseudo-classe :has(), et des transitions pour simuler le déplacement entre les étages, calculer la durée des trajets, afficher la direction, et même gérer l’accessibilité avec aria-live. Les boutons radio servent de déclencheurs d’état, tandis que des astuces comme le délai de mise à jour des variables permettent de mémoriser l’état précédent. Le résultat est une animation fluide, réactive et accessible, prouvant que le CSS moderne peut gérer des logiques complexes, idéal pour des prototypes ou des environnements sans JavaScript.

L’article explique comment CSS Anchor Positioning révolutionne le positionnement des éléments en permettant de lier un élément cible à un ancrage précis, indépendamment de leur relation parent-enfant dans le DOM. Contrairement à position: absolute, qui nécessite souvent une restructuration du HTML ou des calculs fragiles, cette nouvelle API permet de définir un ancrage (anchor-name) sur un élément et de positionner un autre élément (position-anchor) par rapport à ses bords (top, right, bottom, left) ou à une grille 3x3 (position-area). Elle offre aussi des mécanismes de repli intelligents (position-try-fallbacks) pour éviter les débordements hors de la viewport, comme basculer automatiquement un popup du haut vers le bas si l’espace manque. Idéal pour des composants dynamiques et responsives, cette technique simplifie des cas d’usage complexes (tooltips, badges, menus contextuels) sans JavaScript, même si son support reste limité aux navigateurs basés sur Chromium pour l’instant.

L'auteur analyse et améliore la section "hero" du site Time.com, critiquant notamment le passage trop précoce à un affichage mobile (1 colonne) qui gaspille l’espace disponible sur les écrans intermédiaires. Il propose une approche plus flexible et progressive, en utilisant des techniques CSS modernes : CSS Grid, container queries, display: contents, style queries, grid areas, et le sélecteur :has() pour créer un layout adaptatif et dynamique. L’objectif est de laisser le contenu guider la mise en page, avec des transitions fluides entre 1, 2 et 3 colonnes, tout en optimisant l’espace et la lisibilité. L’article illustre aussi l’utilisation des query units (cqw) pour des tailles de police fluides et des astuces comme text-wrap: pretty pour équilibrer les titres. Une démonstration concrète de comment construire des layouts robustes et modulaires avec du CSS avancé.

L'article explore comment concevoir des citations en bloc et des citations extraites pour refléter l'identité visuelle d'une marque et aider à raconter son histoire. L'auteur explique comment styliser l'élément HTML blockquote en utilisant des bordures, des guillemets décoratifs, des formes personnalisées et d'autres propriétés inattendues. Des exemples interactifs montrent comment des bordures simples, des guillemets stylisés et des formes variées peuvent transformer des citations en éléments de design expressifs et distinctifs, renforçant ainsi la personnalité et la voix d'une marque.

L'article présente une technique CSS pour créer des placeholders d'images flous (LQIP) avec un minimum de balisage, nécessitant seulement une propriété CSS personnalisée. Cette méthode utilise un entier pour encoder les informations de couleur et de luminosité, permettant de générer des placeholders sans JavaScript ni éléments supplémentaires. L'approche est minimaliste et efficace, bien que les résultats soient très flous comparés à d'autres solutions. L'article explore également différentes techniques de LQIP et explique comment cette méthode CSS se distingue par sa simplicité et son intégration facile.

L'article explore comment styliser les lettrines pour refléter l'identité visuelle d'une marque et enrichir la narration. L'auteur combine les pseudo-éléments ::first-letter et la propriété initial-letter avec d'autres propriétés CSS comme border-image et clip-path pour créer des effets visuels uniques. Des exemples pratiques montrent comment utiliser des ombres, des contours, des arrière-plans, des bordures et des transformations pour rendre les lettrines plus attrayantes. L'article met en lumière l'importance des lettrines dans la conception web pour attirer l'attention et guider le lecteur, tout en ajoutant une touche distinctive et mémorable.

Suite et fin de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/ et https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/ la quatrième partie de la série sur la fonction shape() en CSS explore les commandes close et move, qui, bien que rarement utilisées, sont incroyablement utiles pour certaines formes complexes. La commande close permet de fermer une forme en revenant automatiquement au point de départ initial, simplifiant ainsi le code et le rendant plus lisible, surtout pour les formes avec plusieurs sous-parties. La commande move, quant à elle, permet de déplacer le point de départ à un nouvel emplacement sans dessiner de ligne, facilitant la création de formes composées de plusieurs parties non connectées. Ces commandes sont particulièrement utiles pour créer des formes découpées et des motifs répétitifs, offrant une grande flexibilité et expressivité. L'utilisation de variables CSS avec ces commandes permet de rendre le code plus adaptable et facile à ajuster, démontrant ainsi la puissance de la fonction shape() pour créer des designs complexes et dynamiques.

Suite de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ et https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/, la troisième partie de la série sur la fonction shape() en CSS explore la commande curve, essentielle pour créer des courbes de Bézier et maîtriser pleinement cette fonction. Contrairement aux commandes line et arc précédemment abordées, la commande curve offre une flexibilité accrue pour dessiner des formes complexes en spécifiant des points de contrôle, sans nécessiter de connaissances mathématiques approfondies. L'article compare les commandes curve et arc, illustrant comment chacune peut être utilisée pour arrondir les coins des formes avec des résultats légèrement différents. Des exemples pratiques, tels que la création d'onglets arrondis et de polygones arrondis, démontrent l'utilisation de la commande curve en remplaçant les commandes line par des combinaisons de line et curve, bien que les calculs puissent être complexes et nécessiter des ajustements. L'utilisation de variables CSS simplifie la gestion et l'ajustement des formes, rendant la création de designs complexes plus accessible. Enfin, l'article encourage l'expérimentation avec la commande curve pour créer des formes esthétiques et rappelle que des outils en ligne sont disponibles pour faciliter l'utilisation et l'optimisation du code.

Suite de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ la deuxième partie de la série sur la fonction shape() en CSS se concentre sur l'utilisation avancée de la commande arc, permettant de créer des formes complexes comme des secteurs et des arcs. L'article, qui suppose une compréhension préalable de la première partie, explore comment manipuler les arcs en utilisant des variables CSS pour contrôler leur taille et leur position, tout en utilisant des mots-clés comme top et center pour simplifier la définition des points. Il aborde les défis liés à la gestion des directions et des tailles des arcs, proposant des solutions pratiques comme l'utilisation de border-radius pour ajuster les formes et l'introduction de conditionnelles en ligne pour modifier dynamiquement les propriétés des arcs. L'article conclut en encourageant l'expérimentation avec la commande arc pour créer des formes esthétiques, tout en notant que la maîtrise des arcs elliptiques est rarement nécessaire pour la plupart des projets.

L'article, 1er d'une série de 4, explore l'utilisation de la nouvelle fonction shape() en CSS pour créer des formes plus complexes et personnalisées. La fonction shape(), actuellement supportée dans Chrome 137+ et Safari 18.4+, permet d'utiliser des commandes similaires à celles de SVG mais avec une syntaxe CSS plus standard, offrant ainsi plus de flexibilité et de fonctionnalités. L'article se concentre sur l'utilisation des lignes et des arcs pour créer des formes, en expliquant comment convertir des chemins SVG en formes CSS et en fournissant des exemples pratiques pour dessiner des rectangles, des découpes circulaires, des onglets arrondis et des rayons inversés. L'auteur souligne également l'importance d'analyser les formes pour simplifier leur création et propose un convertisseur en ligne pour faciliter la transition de SVG à CSS.

L'article présente 10 fonctionnalités récentes des CSS :

• Min, max and clamp - min et max se passent de commentaires, et clamp permet de combiner les deux - une valeur minimale, une valeur préférée, et une valeur maximale
• Container queries - les container query font que les éléments répondent à la taille du conteneur de leur parent plutôt qu'à celle du viewport
• text-wrap: balance & pretty - cette propriété contrôle comment le texte est réparti entre les lignes pour améliorer la lisibilité, la valeur "balance" crée des lignes de longueur égale, alors que "pretty" évite les orphelines (mots se retrouvant seuls sur la dernière ligne)
• CSS Relative Color Syntax - la syntaxe "from" permet d'extraire et de modifier des composants individuels pour toute source de couleur
• Margin Block/Inline Properties - ces propriétés de marge et de padding (margin-block, margin-inline, padding-block, padding-inline) répondent aux besoins induits par différents modes d'écriture et de direction de lecture en CSS, remplaçant les propriétés left / right / top / bottom
• @starting-style - permet d'animer des éléments depuis display:none, en définissant des styles initiaux quand un élément apparaît
• :has() - permet de sélectionner des éléments parents, en se basant sur leurs enfants
  
- Media Query Ranges - simplifie la syntaxe pour définir des intervalles min/max
• light-dark - est un raccourci pour définir différentes valeurs basées sur les préférences de l'utilisateur sur le mode (sombre / light)
• color-scheme - est utile en combinaison avec light-dark, pour informer le navigateur quel jeu de couleurs est supporté par un composant, ce qui permet aux éléments natifs de correspondre automatiquement aux préférences de l'utilisateur
• Nesting - permet d'écrire des CSS en imbriquant les sélecteurs enfants dans leurs parents
• Units - de nouvelles unités comme dvh sont apparues (pour les navigateurs mobiles)
• @layer - permet de gérer des conflits de spécificité en ordonnant explicitement les groupes de styles.

L'article explore une technique avancée des animations CSS avec des keyframes partiels. En omettant les points de départ ou de fin dans une animation, les valeurs initiales sont héritées du contexte, rendant les animations plus dynamiques et réutilisables. Cette approche permet de créer des animations qui s'adaptent à l'état actuel de l'élément, facilitant ainsi des transitions plus fluides et personnalisées. De plus, l'utilisation de variables CSS dans les keyframes permet de définir des valeurs dynamiques, augmentant encore la flexibilité et la puissance des animations CSS.

L'article explore comment transformer les boîtes de dialogue HTML en éléments visuellement attrayants et cohérents avec l'identité d'une marque. En utilisant des techniques CSS avancées telles que ::backdrop, backdrop-filter, et des animations, l'auteur montre comment dépasser les designs génériques pour créer des expériences utilisateur uniques et mémorables. L'article met en lumière des exemples concrets, comme l'intégration de designs rétro inspirés des années 90, tout en maintenant l'accessibilité et la performance. Il encourage les designers à voir les boîtes de dialogue non seulement comme des éléments fonctionnels, mais aussi comme des opportunités pour renforcer le storytelling et l'identité visuelle d'un site web.