Ajouter une ombre css autour de votre contenu, sans image de fond.

Pas évident d’ajouter une ombre autour d’un contenu, sans devoir modifier profondément le thème (template) de votre site.

La technique d’intégration HTML la plus courante consiste à créer une image de fond sur laquelle est ajoutée l’ombre, élargir le conteneur et ajouter un padding.

C’est aussi  le meilleur moyen de tout casser parce que selon le navigateur et sa version, les margin/padding sont interprétés de manière différente.

Il existe une façon plus élégante d’ajouter de l’ombre sans tout casser, en passant par CSS3, suivez le guide !

Voici le détail du code CSS à appliquer :

[sourcecode language= »css »]
div.ombre
{
-moz-box-shadow: 0px 0px 12px #ccc;
-webkit-box-shadow: 0px 0px 12px #ccc;
box-shadow:0px 0px 12px #ccc;
}
[/sourcecode]

Pour en comprendre le fonctionnement, je vous invite à lire cet excellent article : box shadow sur css3.info