Box-shadow et ses hacks

box-shadowBox-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).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *