Avez-vous déjà remarqué que certaines interfaces semblent plus "douces" ou plus "premium" sans que vous puissiez dire pourquoi ? Souvent, la réponse ne se trouve pas dans les couleurs ou la typographie, mais dans la forme des coins.
Aujourd’hui, on plonge dans le monde du Squircle, cette courbe qui obsède Apple et les designers de haut niveau, et je vous montre comment je l'ai intégrée sur ce site.
Le problème de l'arrondi classique (border-radius)
En CSS classique, quand on utilise un border-radius, on crée un arc de cercle parfait qui vient se coller à une ligne droite.
Le problème ? Pour l'œil humain, la transition est brutale. Il y a une "cassure" mathématique au point de contact entre la droite et le cercle. C'est ce qu'on appelle une discontinuité de courbure.
[Image d'illustration : Zoom comparatif montrant la cassure d'un arrondi classique vs la fluidité du squircle]
Qu'est-ce qu'un Squircle ?
Le Squircle (mélange de square et circle) est une hyperellipse. Contrairement au cercle, sa courbure commence à changer bien avant l’angle. La transition est progressive, organique.
C’est la signature d'Apple depuis des années. Des icônes d'iOS au design matériel de l'iPhone, tout est "Squircle". C'est ce qui donne cet aspect "objet fini" et naturel.
Comment l'utiliser en développement ?
Pendant longtemps, faire un Squircle en web était un cauchemar (il fallait utiliser des complexes ou des fichiers SVG en masques). Mais les choses évoluent !
Commentaires