les trucs du web design : Les ombres avancées

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 navigateur…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 actuelle, 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.
ombre avancée

Le code CSS pour reussir

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *