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.
L'article explore comment les techniques d'animation des dessins animés classiques peuvent inspirer les animations CSS modernes. L'auteur, Andy Clarke, montre comment il a appliqué ces principes pour créer des animations engageantes sur le site web du compositeur Mike Worth. Les limitations budgétaires des anciens dessins animés ont conduit à des techniques créatives, comme la réutilisation de cellules et de fonds, qui peuvent être reproduites avec CSS. Ces animations améliorent l'expérience utilisateur et renforcent l'identité de la marque.
L'article explore les nouvelles capacités de la fonction attr() en CSS, qui permet désormais d'utiliser des valeurs autres que du texte, comme des couleurs, des nombres, et des pourcentages. Cette fonctionnalité, bien que non supportée par tous les navigateurs, offre une flexibilité accrue pour styliser des éléments HTML en fonction de leurs attributs. L'auteur présente divers cas d'utilisation, tels que l'assignation de colonnes dans une grille CSS, la gestion des délais d'animation, et la définition de couleurs dynamiques, tout en soulignant les avantages en termes de séparation des préoccupations et de réduction des conflits CSS.
L'article décrit le processus de recréation d'une animation P5.js de Rach Smith en utilisant CSS, en particulier la propriété offset-path. Initialement, l'auteur a tenté de suivre manuellement les positions et directions de chaque boîte dans l'animation, ce qui s'est avéré complexe. Cependant, il a découvert que l'utilisation de offset-path avec la fonction inset() permettait de créer un chemin carré le long duquel les boîtes pouvaient se déplacer en animant les valeurs de offset-distance. Cette méthode a simplifié le processus et permis de distribuer uniformément les boîtes grâce à des valeurs de animation-delay calculées proportionnellement. L'article explore également l'utilisation de offset-path avec d'autres formes comme polygon() pour créer des animations intéressantes et variées.
Les CSS Relative Colors permettent de manipuler dynamiquement les couleurs sans recourir à des préprocesseurs comme Sass. Ils offrent une méthode native pour ajuster l'opacité et créer des variations de couleurs directement en CSS. Cette fonctionnalité est supportée par les principaux navigateurs et permet de simplifier la gestion des couleurs dans les projets web. Les couleurs relatives utilisent des fonctions comme rgb() et hsl() pour modifier les canaux de couleur, facilitant ainsi la création de thèmes et d'effets visuels cohérents. Elles peuvent également être combinées avec color-mix() pour des ajustements plus complexes, offrant une flexibilité accrue dans le design web.
Tout est dans le titre
En résumé, si les valeurs comparées dans max sont un calcul et qu'un de ces calculs échoue, l'intégralité de max échoue... donc il vaut mieux entourer le calcul par un @supports
Tout est dans le titre
Il s'agit d'une façon plus fine d'utiliser les Cross-Document View Transitions, qui permettent de faire des effets de transition quand on passe d'une page à une autre via un clic.
Tout est dans le titre
Tout est dans le titre
L'auteur rappelle le principe de moindre pouvoir : choisir le langage le moins puissant pour un but donné — on permet ainsi de laisser le navigateur la manière d'accomplir ce que l'on souhaite.
Il présente ensuite quelques éléments / fonctionnalités pour lesquelles JavaScript peut être remplacé avantageusement par du HTML / CSS :
- Custom Switches
- Datalist, un composant avec autocomplétion native
- Un Color picker
- Accordions
- Dialog modals
Il rappelle à chaque fois les meilleures pratiques d'accessibilité.
Tout est dans le titre
une bibliothèque d'animations CSS pour des loader