Box-shadow avec CSS3 Zoom

Box-shadow avec CSS3

Créer de l'ombre portée sur vos éléments html comme div, header, article, footer, aside, nav, section, image (balise <img>) avec la propriété css3 BOX-SHADOW

Plus de détails

BOX-SHADOW ou l'art de faire de l'ombre à... Photoshop !

box-shadow CSS3

je suis une DIV de 300px sur 200px



Avant de continuer la lecture, je vous invite de vérifier, d'abord, la version de votre navigateur!
Car si vous êtes encore sur IE8 (ou inférieur évidemment!) vous ne pouriez pas visualiser l'ombre portée de cette div.
Nous aurons l'occasion dans d'autres tutoriels de parler CSS3 et COMPATIBLITE avec les NAVIGATEURS.

Maintenant, voyons ensemble le style CSS appliqué pour avoir cet ombrage.

Le code html5 :

<div id="tuto_box-shadow">
</div>


Le style CSS3 :

#tuto_box-shadow {

    width : 300px ;

    height : 200px ;

    background : #6666CC ;

    box-shadow : 15px 10px 12px  #000000 ;
}

Explication :
Dans la propriété de notre box-shadow, nous avons trois valeurs différentes exprimées en px (pixel) ainsi qu'une couleur hexadécimale.
 - La première valeur 15px indique le décalage horizontal vers la droite.
 - La seconde valeur 10px correspond au décalage vertical vers le bas.
 - La troisième valeur 12px correspond à l'étendue du flou appliqué.
 - #000000 (noir en hexadécimal) indique la couleur de l'ombre (on peut aussi la remplacer par une couleur rgba(0,0,0,1). Nous parlerons de rgba dans un autre tuto.

Astuce: pour voir et simuler l'effet que vous souhaité, utilsez Firebug en changeant les valeurs.

Donner votre avis

Box-shadow avec CSS3

Box-shadow avec CSS3

Créer de l'ombre portée sur vos éléments html comme div, header, article, footer, aside, nav, section, image (balise <img>) avec la propriété css3 BOX-SHADOW

Donner votre avis