Une autre nouveauté pour les Web designer en Css est la possibilité de mettre des ombres à différents éléments via le css, et non plus dans des logiciels d'édition d'image. Ces ombres sont paramétrables de plusieurs façon, la couleur, la taille, le flou ainsi que la distance. 
Attention tout de même certains navigateurs arriérés ne comprennent pas cette syntaxe.

Box-shadow


 Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
box-shadow: 5px 5px 3px #789;
La propriété box-shadow attend au minimum quatre paramètres.

Le premier étant le décalage horizontale avec l'élément en question. Une valeure positive déplacera l'ombre vers la droite alors qu'une négative vers la gauche.
box-shadow: -5px 5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le second étant le décalage vertical avec l'élément en question. Une valeure positive déplacera l'ombre vers le bas alors qu'une négative vers le haut.
box-shadow: -5px -5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
box-shadow: -5px -5px 0px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Enfin la quatrième est pour la couleur de l'ombre.
box-shadow: -5px -5px 8px #268;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Un autre paramètre optionnel peut être rajouté avant de définir la couleur, il représente l'agrandissement de l'élément en question.
box-shadow: 0 0 8px 5px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Ombre interne (inset)


Pour rajouter une ombre à l'intérieur d'un élément, il suffit de rajouter le mot clef 'inset' en premier paramètre. Les exemples ci-dessous vous détaillent différents rendu :

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px #888;
}

#Example_B {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 5px #888;
}

#Example_C {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 0 5px #888;
}

#Example_D {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 5px 5px #888;
}

#Example_E {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset 0 0 5px #888;
}

#Example_F {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset 0px 0px 5px 5px #888;
}

A
B
C
D
E
F

Plusieurs ombres

On a vu que comment appliquer une ombre à des éléments, mais il faut savoir qu' l'on peut avoir plusieurs ombre différentes par éléments. Pour cela, il suffit de les séparer par une virgule. L'ordre qui est alors pris en compte, est l'inverse de l'ordre d'écriture. En effet la première ombre renseigné sera au premier et les autres suivront.

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 0 0 10px 5px yellow, 40px -30px rgb(255, 153, 0), 40px 30px 50px blue, -40px 30px #f600ff, -40px -30px 50px red;
}

A

Transparence et coins arrondis

Il est possible de gérer l'opacité de l'ombre grâce à la composante alpha d'une couleur. Les exemples ci-dessous nous montrent bien l'utilisation de cette composante :

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgb(0,0,0);
}

#Example_B {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgba(0,0,0,0.7);
}

#Example_C {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgba(0,0,0,0.3);
}

A
B
C

Et rien ne nous empêche de le combiner avec les coins arrondis que nous avons vu précédemment.
box-shadow: 0 0 8px 5px #789;
border-radius:15px;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.