Box-shadow est une propriété CSS3 que j’utilise beaucoup.
Elle est pratique et fonctionne bien sur tous les navigateurs récents :
box-shadow: 0 0 8px #666;
Pour IE 7 & 8 ça se corse puisqu’il faut utiliser un filtre et tâtonner un peu pour retrouver le même rendu. De plus il faut un filtre par coté, ce qui nous donne :
filter:progid:DXImageTransform.Microsoft.Shadow(color=#666,direction=75,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666,direction=250,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666,direction=180,strength=5);
D’autre part il est possible d’utiliser box-shadow de manière un peu détourné.
Je souhaite par exemple avoir un ombré sur seulement deux des cotés de mon bloc, donc je décale :
box-shadow: 3px 3px 8px #666;
Classique! La première valeur pour l’axe « x » la deuxième pour l’axe « y » et la troisième pour l’étendu de mon ombre.
En revanche si je souhaite n’avoir une ombre que sur un seul coté ça se complique. Étant donné que box-shadow créé une ombre qui s’étend de manière égale dans toutes les directions, que faire?
Il suffit tout simplement de donner une valeur négative à mes axes et de donner une valeur plus importantes à mon ombré :
box-shadow: 0 13px 4px -8px #C8C8C8;
Nota : pour IE 7 & 8 c’est encore plus simple (une fois n’est pas coutume puisqu’il suffit de ne mettre qu’un filtre sur le coté voulu).
