Jouer avec les ombres et les lumières en CSS

Les ombres ont commencé à se répandre sur le web avec l'arrivée des propriétés CSS box-shadow et text-shadow, jusqu'à devenir maintenant un des points clés du material design. Pratique pour indiquer les positions spatiales des éléments les uns par rapport aux autres, elles permettent aussi des effets vraiment impressionnants dans les mains d'intégrateurs et développeurs talentueux.

Les 11 ressources que je vous propose aujourd'hui se repartissent trois catégories. Tout d'abord, des ombres créées grâce à des sources de lumières dynamiques se déplaçant avec votre clavier, votre souris, ou autres. Cette catégorie inclut un petit jeu que je vous conseille vraiment d'essayer.

Ensuite, vous pourrez retrouver une série d'ombres portées, qui évoluent en fonction du scroll, de la position d'un élément, ou qui s'adaptent au changement de forme de leurs propriétaires. Enfin, quatre ressources inclassables que je vous laisse découvrir par vous-même.

Source de lumière dynamique

Ce premier lien est un peu spécial, car il se présente sous la forme d'un mimi jeu. Déplacez avec WSAD le valeureux pixel vert à la recherche de la princesse pixel rose (l'ombre la révèle), puis allez la sauver !

Note : le scénario étant assez minimaliste, je vous ai proposé mon interprétation. Libre a vous de me proposer la votre en commentaires ^^.

Ces trois autres exemples proposent de déplacer la source de lumière avec sa souris pour voir les ombres évoluer.

Ombres portées dynamiques

Divers