les trucs du web design : Les ombres avancées

Contrairement au magicien qui ne dévoile jamais leurs trucs, les web designer n’hésite pas à dévoiler au plus grand nombre leurs astuces, (en même temps leurs trucs sont dévoilé par les outils de développement de vos navigateurs… dur de garder un secret).

Les ombres avancées

l’astuce d’aujourd’hui c’est le système d’ombres avancées que l’on rencontre beaucoup sur les sites web actuelles, c’est un effet qui permet de créer un effet de page écorné comme un post-it pour donner un peu de relief et tout ça en CSS3.

Les choses à connaitre pour commencer

1. Il vous faut avant tout connaitre les pseudo éléments ::before et :: after.
   Ces pseudo éléments servent à ajouter du contenu avant et après une div, un paragraphe, une image…etc, et remplace les div crée juste pour un aspect décoratif.exemple : div::before { content: » »; }
2. Il vous faut connaitre le box-shadow, il s’utilise très simplement il vous faut rentrer 3 paramètres : le décalage horizontal, le décalage vertical, la longueur du dégradé de l’ombre ainsi que la couleur.
   exemple : div {box-shadow: 1px 2px 15px #333;}

L’explication du système d’ombre

l’astuce réside dans le fait de placer sous la div ses pseudo-éléments de leur appliquer un box-shadow, et de les incliner  pour avoir l’effet.

Le code CSS pour réussir