La propriété css box-shadow seule.
La propriété css box-shadow n'est reconnue que par les navigateurs récents
Générateur de code Css pour ombre Css portée ou lueur Css interne
Code CSS pour faire une ombre Css portée ou une lueur interne Css.
background-color: #cccccc;
-moz-box-shadow: 10px 15px 5px 3px #656565;
-webkit-box-shadow: 10px 15px 5px 3px #656565;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=15,Color='#656565', Positive='true');
box-shadow: 10px 15px 5px 3px #656565;
/* pour IE9 et + ce hack ci-dessous peut être fait avec le commentaire conditionnel d'IE :
[if gte IE 9]*/
@media only screen {#exemple{filter: none;}}
Explication du code d'ombre CSS box-shadow
La propriété d'ombre CSS box-shadow est apparue avec CSS3, elle permet de générer une ombre Css portée ou de lueur (glow) sur un élément HTML.
La propriété d'ombre css box-shadow n'est reconnue que par les navigateurs récents (voir chapitre suivant), il est nécessaire de faire de compléter cette propriété par des propriétés Css propriétaires pour les anciens navigateurs :
- -moz-box-shadow, pour Firefox
- -webkit-box-shadow pour Safari et Chrome
- filter pour Internet Explorer
Les problèmes de compatibilité antérieure.
Si vous voulez faire un effet à l'intérieur de l'élément alors, la compatibilité antérieure ne pourra se faire sur les propriétés d'ombres Css -webkit-box-shadow et filter qui ne gère pas l'effet à l'intérieur.
Pour Internet Explorer 9 et plus (semble-t-il), la propriété d'ombre Css box-shadow ne fonctionne pas si la propriété css border-collapse n'est pas égale à separate .
En ce qui concerne la propriété filter dans le cas d'une ombre Css portée, c'est le filtre DXImageTransform. Microsoft.dropshadow qui est utilisé, mais il y a des différences comme vous pouvez le voir sur l'image. Sous IE, l'espace (horizontal et vertical) prit par l'ombre Css est inférieure, elle ne prend pas en compte la longueur du flou et la longueur de l'ombre Css. Si vous avez besoin d'exactement le même espace vous devez ajouter à OffX et OffY la longueur du flou et de l'ombre Css.
D'autre par, si vous faites un effet de lueur, c'est le filtre DXImageTransform. Microsoft.Glow qui est utilisé, ce filtre crée l'effet le plus rapproché, mais il y a des différences comme vous pouvez le voir sur l'image
Le hack css pour Internet Explorer 9 et plus.
Pour Internet explore 9+, il faut lui dire de ne pas appliquer la propriété css filter mais la propriété css box-shadow. Pour cela, nous avons utilisé un hack CSS utilisant media, mais vous pouvez aussi le faire de cette manière. <!--[if gte IE 9]> <style type="text/css">
.selecteur { filter: none; }
</style> <![endif]-->
Prendre en charge les couleurs avec transparence sur l'ombre Css.
Vous pouvez aussi mettre des couleurs d'ombres Css avec transparence ou d'un autre format (hsl, rgb), pour cela vous pouvez utiliser le convertisseur une couleur. Cependant faites attention aux compatibilités avec les navigateurs.
Changer les unités de longueur.
Pour le générateur d'ombre Css ou de lueur Css, j'ai pris l'unité pixel car les filtres d'Internet Explorer n'acceptent que du pixel. Cependant, pour les autres vous pouvez changer l'unité pour du em ou du % par exemple.
En savoir plus sur les unités de longueur
Compatibilité des ombres C ss avec les navigateurs.
Ombre Css avec effet à l'extérieur (ombre Css portée).
Pour les versions d'Internet Explorer < 9 c'est la propriété filter qui est utilisée, elle ne prend pas en compte la notion de flou, et est légèrement différente.
Ombre Css avec effet à l'intérieur (lueur interne).
Pour les versions d'Internet Explorer < 9, c'est la propriété css filter qui est utilisée et elle ne prend pas en compte l'effet à l'intérieur de l'élément
Pour les versions de Safari < 5.0, c'est la propriété css -webkit-box-shadow qui est utilisée et elle ne prend pas en compte l'effet à l'intérieur de l'élément.
Avec effet avec coins arrondis.
L'arrondi des coins de l'élément est répercuté sur l'ombre Css ou la lueur Css.