www.joshwcomeau.com

Dev front

Sneaky Header Blocker Trick • Josh W. Comeau

Cet article présente une astuce CSS pour la création d'un effet de header sticky, donnant l'impression d'un changement de fond lors du défilement sur un blog. L'auteur explique comment utiliser des éléments 'bloqueurs' pour créer une transition entre deux couleurs de fond en scrollant sans nécessiter de JavaScript. Il aborde également les contraintes de conception liées à cette stratégie et compare cette technique à une approche plus traditionnelle utilisant du JavaScript pour modifier la couleur de fond.

www.joshwcomeau.com

css
Dev front

Sprites on the Web • Josh W. Comeau

L'article explique comment utiliser les sprites en CSS pour créer des animations fluides sans surcharge de performances sur les appareils mobiles. Il détaille la création d'une feuille de sprites, l'utilisation de propriétés CSS comme 'object-fit' et 'object-position', et comment animer les images en utilisant des keyframes avec une fonction de timing pour obtenir des transitions par étapes. Cette méthode est inspirée de techniques de développement de jeux vidéo.

www.joshwcomeau.com

cssspriteshtml
Dev front

An Interactive Guide to SVG Paths • Josh W. Comeau

Cet article propose un guide interactif sur l'utilisation des chemins SVG, en expliquant comment dessiner des formes en utilisant des commandes spécifiques comme 'M' pour déplacer le 'stylo' et des courbes Bézier. Il aborde la syntaxe des chemins SVG et donne des conseils pour rendre cette syntaxe plus compréhensible. En plus de sa structure de base, l'article décrit comment utiliser des courbes quadratiques et cubiques, ainsi que les subtilités de l'utilisation de commandes en minuscules et en majuscules.

www.joshwcomeau.com

csssvghtml
Dev front

A Friendly Introduction to SVG • Josh W. Comeau

Cet article présente une introduction amicale aux SVG (Scalable Vector Graphics), une technologie d'illustration puissante et dynamique intégrable dans le développement web. L'auteur explique les fondamentaux des SVG, leur intégration dans des documents HTML, et la façon d'utiliser CSS et JavaScript pour manipuler et animer des éléments SVG. Des exemples de formes basiques (lignes, rectangles, cercles, ellipses et polygones) sont fournis pour illustrer comment créer et styliser des graphiques vectoriels.

www.joshwcomeau.com

svghtmlcss