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 :

div.ombre
{
-moz-box-shadow: 0px 0px 12px #ccc;
-webkit-box-shadow: 0px 0px 12px #ccc;
box-shadow:0px 0px 12px #ccc;
}

Georges Lucas aurait fait des économies avec CSS3
Pour en comprendre le fonctionnement, je vous invite à lire cet excellent article : box shadow sur css3.info

Attention : Cette technique ne fonctionne que sur les navigateurs qui interprètent CSS3

Les anciennes versions de Firefox, Internet Explorer & consorts n’afficheront certes pas l’ombre …
mais vous êtes sur de ne rien casser en ajoutant cette fonctionnalité. C’est ce qu’on appelle la « dégradation progressive ».

Crédits photos : mcohen chromiste