• A la une
  • Catégories
  • Dossiers
  • +

Inspiration pour les intégrateurs #54 : Ombres et lumières

par Benjamin SANCHEZle 01/10/2015

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

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

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir