La fonction CSS shape() du module Shapes Level 2 permet de créer des tracés complexes et fluides directement dans les feuilles de style, offrant une alternative aux méthodes rigides comme polygon() ou path(). Contrairement à ces dernières, elle combine la syntaxe vectorielle SVG avec des unités CSS flexibles (pourcentages, em, etc.), garantissant des formes responsives sans dépendre d’images externes ou de calculs lourds.
L’article explique son fonctionnement via des commandes de dessin intuitives (from, move to, line to, curve, etc.), similaires à celles des tracés SVG, mais adaptées aux besoins du CSS moderne. Elle s’applique notamment aux propriétés clip-path (pour découper des éléments) et offset-path (pour animer des objets le long d’un tracé).
Enfin, le guide illustre son utilité avec des cas concrets comme une bulle de dialogue responsive ou une bannière à bordure incurvée, tout en soulignant ses avantages en termes de performances et de référencement naturel. Bien que supportée par la plupart des navigateurs récents, cette fonction reste à explorer pour des designs plus dynamiques et maintenables.
Ce guide démystifie l’élément <path> en SVG, souvent perçu comme complexe. À travers des exemples interactifs, il explique comment utiliser les commandes (M, L, Q, C, A, etc.) pour dessiner des lignes, courbes de Bézier et arcs elliptiques, en enchaînant des instructions comme avec un stylo. Le guide couvre aussi les astuces (fermeture de chemin, commandes relatives) et montre comment créer des formes avancées, utiles pour le design et les animations web.
Suite de https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/ l'article explore les aspects complexes de l'élément path en SVG, en se concentrant sur la création de courbes et d'arcs. L'autrice explique les règles sous-jacentes et les fonctions de construction des courbes de Bézier quadratiques et cubiques, ainsi que des arcs, en utilisant des exemples visuels et des animations pour illustrer les concepts. L'article aborde également l'utilisation des commandes Q, T, C, S, et A pour dessiner ces formes, offrant ainsi une compréhension approfondie de la syntaxe et des mécanismes de l'élément path en SVG.
L'article explore les bases de l'élément en SVG, souvent perçu comme complexe. L'autrice démystifie les commandes de ligne de cet élément puissant, en se concentrant sur les commandes pour créer des chemins droits et angulaires. À travers des exemples simples et des visualisations, elle explique la syntaxe et les règles sous-jacentes, permettant aux lecteurs de traduire les balises sémantiques SVG dans le langage compris par path. L'article aborde les commandes de base comme M pour déplacer le point de départ, L pour tracer une ligne, ainsi que H et V pour les lignes horizontales et verticales. Il introduit également les commandes relatives et montre comment créer des polygones et des polylignes avec la commande Z. Cet article est le premier d'une série visant à rendre l'utilisation de path accessible pour des dessins techniques et des visualisations de données.
Quelques astuces sur le la variabel shell PATH
Tout est dans le titre (via sebsauvage)
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre ^^