Le principe d’animation squash and stretch (écrasement et étirement), issu des 12 principes de base de Disney, consiste à déformer un objet en mouvement pour lui donner une apparence plus dynamique et réaliste. L’auteur illustre ce concept avec une balle qui s’aplatit à l’impact et s’allonge lors du rebond, tout en soulignant l’importance de modérer l’effet pour éviter un rendu exagéré.
L’application concrète sur le web concerne souvent des icônes SVG, comme des flèches qui s’étirent et s’amincissent au survol. Cette technique, subtile mais efficace, améliore l’interactivité perçue. L’article propose un tutoriel pour implémenter ce effet, en partant d’un code SVG simple et en utilisant des bibliothèques JavaScript pour faciliter l’animation.
Cet article d'Alsacreations explore l'évolution du design web responsive au-delà des breakpoints traditionnels, en introduisant le concept d'Intrinsic Web Design. Il met en lumière les nouvelles fonctionnalités CSS modernes comme les mots-clés intrinsèques (auto, min-content, max-content, fit-content, stretch) et les fonctions mathématiques (clamp(), min(), max()) pour créer des composants web fluides et adaptables. L'article aborde également l'utilisation avancée de Flexbox et Grid Layout pour gérer l'espace de manière dynamique, sans recourir à des media queries. Un outil maison, Elastic, est mentionné pour faciliter la génération de formules CSS fluides.