Créer une ombre interne en CSS3 sur des blocs HTML

Avec CSS3, vous avez la possibilité de générer une ombre interne sur une box, ce qui simplifie et allège votre page web. Pour ce faire il vous faut utiliser la propriété CSS3 box-shadow.

Comment fonctionne la propriété box-shadox ?

Si on prend par exemple  la ligne de code suivante :

box-shadow: -1px 2px 10px 3px #000 inset;

On peut légitimement se demander à quoi correspondent chacun des paramètres utilisés. Alors voici les éclaircissements :

• la première valeur (-1px) correspond à la position horizontale de l’ombre
• la deuxième valeur (2px) correspond à la position verticale de l’ombre
• la troisième valeur (10px) correspond à l’étendu du dégradé de la couleur opaque vers le transparent
• la quatrième valeur (3px) correspon à la taille de l’ombre
• la cinquième valeur (#000) définit la couleur de l’ombre
• la valeur inset permet de définir la position internet de l’ombre ( pour une ombre externe, il suffit de ne pas préciser cette valeur, ce qui donne : box-shadow: -1px 2px 10px 3px #000

Un exemple de code CSS3 pour réaliser une ombre interne

box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;

Il vous est possible de visionner le résultat de ce code à l’adresse de ce blog dédié à la parodie de chanson.

Et la compatibilité avec les navigateurs ?

Ce code CSS3 est compatible avec tous les navigateurs modernes. Des préfixes peuvent être utilisé pour les anciens navigateurs :

• -o- pour Opera
• -moz- pour Firefox (navigateurs utilisant le moteur Gecko)
• -webkit- pour Chrome, Safari, Android… (navigateur utilisant Webkit)
• -ms- pour Internet Explorer
• -khtml- pour Konqueror

De façon courante, on utilisera l’écriture suivante :

box-shadow: -1px 2px 10px 3px #000 inset;
-moz-box-shadow: -1px 2px 10px 3px #000 inset;
-webkit-box-shadow: -1px 2px 10px 3px #000 inset;

A vous de jouer !