La propriété box-shadow de CSS3 nous permet d'obtenir facilement des effets d'ombre de calque. Expliquons cet attribut en détail dans la pratique.
1. Compatibilité navigateur de l’attribut box-shadow Voyons d’abord la compatibilité navigateur de cet attribut :
Opera : Je ne sais pas quelle version il a commencé à prendre en charge. Lorsque j'ai publié cet article à des fins de test, je viens de mettre à jour Opera vers la dernière version 10.53, qui prend déjà en charge l'attribut box-shadow.
Firefox prend en charge cela via la propriété privée -moz-box-shadow.
Safari et Chrome le prennent en charge via la propriété privée -webkit-box-shadow.
Non pris en charge par tous les IE (je ne sais pas si IE9 s'est amélioré). Ne vous inquiétez pas, nous présenterons quelques astuces pour IE à la fin de l'article.
2. Syntaxe de l'attribut box-shadow
box-shadow a six valeurs réglables :
img{box-shadow : Type d'ombre Déplacement de l'axe X Déplacement de l'axe Y taille de l'ombre extension de l'ombre couleur de l'ombre}
Lorsqu'aucun type d'ombre n'est défini, la valeur par défaut est l'effet d'ombre. Lorsqu'il est réglé en médaillon, il s'agit d'un effet d'ombre intérieure.
Les déplacements des axes X et Y ne sont pas équivalents mais similaires à "angle" et "position" dans Photoshop.
La taille, l'extension et la couleur de l'ombre sont les mêmes que dans Photoshop.
3. Exemple d'analyse Examinons l'effet d'une ombre de boîte à travers plusieurs exemples. Tout d'abord, créons un code HTML simple pour tester :
Remarque : pour éviter les problèmes, seul box-shadow est écrit dans le code CSS ci-dessous. En utilisation réelle, vous devez également écrire -moz-box-shadow et -webkit-shadow. Ce que vous devez faire est très simple, copiez deux box-shadows et ajoutez -moz- et -webkit- devant eux.
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
boîte-ombre : 2px 2px 10px #06C ;
}
(1). Ombre portée, pas de déplacement, taille d'ombre 10px, pas d'expansion, couleur #06C.
img{box-shadow:0 0 10px #06C;}
La valeur de couleur ici est la valeur HEX. Nous pouvons également utiliser la valeur RGBA. L'avantage de la valeur RGBA est qu'elle a une valeur de transparence Alpha supplémentaire et que vous pouvez contrôler la transparence de l'ombre.
img{box-shadow : 0 0 10px rgba(0, 255, 0, .5)}
(2). Ajoutez une extension de 20 pixels à ce qui précède.
img{box-shadow:0 0 10px 20px #06C;}
(3). Ombre intérieure, pas de déplacement, taille 10px, pas d'expansion, couleur #06C.
img{box-shadow:encart 0 0 10px #06C;}
(4). Plusieurs effets d'ombre
Box-shadow peut être utilisé plusieurs fois en même temps. Utilisons une ombre à quatre couleurs.
img{box-shadow:-10px 0 10px rouge, box-shadow:10px 0 10px bleu,box-shadow:0 -10px 10px jaune,box-shadow:0 10px 10px vert}
(5) L'ordre d'utilisation de plusieurs attributs d'ombre lorsque vous utilisez plusieurs attributs d'ombre pour le même élément, vous devez faire attention à leur ordre. L'ombre écrite en premier sera affichée en haut. Par exemple, dans le code suivant, nous écrivons d'abord une ombre verte de 10 px, puis une taille de 10 px mais étendue d'une ombre de 20 px. Le résultat est : un calque ombré de vert au-dessus d’un calque ombré de jaune.
img{box-shadow:0 0 10px vert;box-shadow:0 0 10px 20px jaune}
Mais si on change l'ordre, comme ceci :
img{box-shadow:0 0 10px 20px jaune,box-shadow:0 0 10px vert;}
Nous ne pourrons pas voir la couche ombrée verte écrite plus tard car elle est recouverte par la couche jaune écrite en premier et avec un rayon plus grand.
4. Laissez IE prendre également en charge box-shadow
IE lui-même utilise un filtre d'ombre pour obtenir des effets similaires, et il existe également des fichiers de hack js et .htc qui peuvent vous aider à obtenir cet effet dans IE. Je ne peux pas tous les essayer, je ne présente donc ici que celui que j'ai utilisé.
ie-css3.htc est un fichier HTC qui permet au navigateur IE de prendre en charge certaines propriétés CSS3, pas seulement box-shadow, mais permet également à votre navigateur IE de prendre en charge l'attribut de coin arrondi border-radius et l'attribut text-shadow text-shadow .
Comment l'utiliser : téléchargez-le et placez-le dans le répertoire de votre serveur
Écrivez le code suivant dans votre
:
Dans la partie bleue, entrez le sélecteur en utilisant l'attribut box-shadow, et dans la partie verte, entrez le chemin absolu ou relatif de ie-css3.htc. Quoi qu'il en soit, assurez-vous qu'il est accessible.
Alors c'est bon. Mais il y a quand même quelques points à noter :
Lorsque vous utilisez ce fichier HTC, tant que box-shadow, -moz-box-shadow ou -webkit-box-shadow est écrit dans votre CSS, IE le restituera.
Lorsque vous utilisez ce fichier HTC, vous ne pouvez pas écrire box-shadow : 0 0 10px red ; mais box-shadow : 0px 0px 10px red ;
La transparence alpha dans les valeurs RGBA n'est pas prise en charge.
Les ombres intérieures incrustées ne sont pas prises en charge.
L'extension de l'ombre n'est pas prise en charge.
Les ombres n'apparaîtront qu'en noir dans IE, quelles que soient les autres couleurs que vous leur définissez.
Ainsi, ce script permet uniquement à IE de prendre en charge certaines valeurs box-shadow. Si vous avez d'autres meilleurs scripts de hacks IE, veuillez laisser un message à partager.