CSS Elevator est un projet ingénieux démontrant comment créer une machine à états interactive (un ascenseur) en CSS pur, sans JavaScript. L’auteur utilise des variables CSS personnalisées (via @property
), des compteurs, la pseudo-classe :has()
, et des transitions pour simuler le déplacement entre les étages, calculer la durée des trajets, afficher la direction, et même gérer l’accessibilité avec aria-live
. Les boutons radio servent de déclencheurs d’état, tandis que des astuces comme le délai de mise à jour des variables permettent de mémoriser l’état précédent. Le résultat est une animation fluide, réactive et accessible, prouvant que le CSS moderne peut gérer des logiques complexes, idéal pour des prototypes ou des environnements sans JavaScript.
Tout est dans le titre
Une jolie démonstration des possibilités des CSS
Impressionnant
Des démos de ce que l'on peut faire en CSS, sans JavaScript
Des explications sur certaines propriétés CSS3 pour réaliser des effets décoratifs plutôt cools (via https://blog.stephaniewalter.fr/semaine-pixels-8-juillet-2016/ )
Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript) | CSS-Tricks
Une belle démonstration des possibilités de CSS
Des démos CSS très intéressantes : formulaires, menus, "blocs ouvrables", etc.