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

Inspiration pour intégrateurs #21 : Box-shadow et le pixel art

par Benjamin SANCHEZle 03/07/2014

La propriété box-shadow est une propriété CSS3 originellement prévu pour permettre de créer des ombres portées autour d'une boîte, d'une image ou d'un texte. Mais cette propriété est souvent détournée pour autre chose : le pixel art.

En effet, il est possible de préciser plusieurs box-shadow par élément. En utilisant cette technique, et en contrôlant avec précision le placement et la taille de chaque ombre, il est possible de "dessiner" une image en couleur à partir d'un simple élément.

Évidemment, cette technique a un gros inconvénient : elle demande beaucoup de répétitions et quelques calculs mathématiques assez fastidieux. C'est pourquoi beaucoup des exemples proposés reposent sur le Sass pour supprimer cette contrainte, en tirant profit des opérateurs mathématiques, des variables et des boucles.

Pour illustrer cette technique, je vous propose de découvrir 10 exemples de box-shadow pixel art simples à appréhender et à comprendre.

Box-Shadow Pixel Art

  • 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