Jouer avec les ombres et les lumières en CSS

Le 01/10/2015

Dans Webdesign

Aujourd'hui, les inspirations pour intégrateurs vous proposent de ranger les palettes de couleurs, et sortir les lampes torches. Sujet du jour : les ombres et la lumière.

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 ^^.

Dynamic light

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

Long shadow

Javascript 2d dynamic lighting

Shadows and light

Ombres portées dynamiques

Perspective shadow

Shadow parallax

Dynamic text shadows

Divers

Canvas sparkle light trail

Blackout

Lights off

Rectangular area light westlangley