Les concepteurs utilisent souvent des effets de police et des effets de page uniques, et l'ombre en fait partie. Elle peut donner au texte et aux éléments de la page un effet tridimensionnel et se démarquer. Par exemple, pour les ombres de texte, la méthode traditionnelle peut nécessiter de découper le texte et d'utiliser directement des images. Si l'on prend en compte les performances du référencement et du site Web, des technologies telles que les Sprites CSS peuvent également être utilisées pour intégrer des images :
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{position-arrière-plan:0 -30px;}
h2#title2{position-arrière-plan:0 -60px;}
....
C'est une chose délicate, assembler des images vous prendra beaucoup de temps, et pour obtenir de meilleurs effets visuels, vous devrez peut-être utiliser des images png 32 bits de haute qualité, ce qui vous fera affronter le foutu png d'IE 6. problème de transparence !
En fait, nous pouvons complètement utiliser CSS pour obtenir l’effet d’ombre du texte !
Vous pouvez d'abord voir la démo.
Texte-ombre
text-shadow nous permet d'obtenir des effets d'ombre de texte parfaits. Écriture de base :
text-shadow:[couleur rayon de flou de l'axe y de l'axe x],[couleur rayon de flou de l'axe y de l'axe x]...
ou
text-shadow:[couleur du rayon de flou de l'axe y de l'axe x],[couleur du rayon de flou de l'axe y de l'axe x]...
La couleur ici est la couleur de l'ombre. Vous pouvez écrire la couleur en premier ou en dernier. Les axes x et y sont respectivement les positions décalées de son ombre, et le rayon de flou peut être compris comme la longueur de l'ombre. Et la plupart des navigateurs prennent désormais en charge les ombres multicouches. Vous pouvez séparer plusieurs groupes de paramètres par des virgules (vous pouvez bien sûr également utiliser un seul paramètre).
Exemple:
h1{couleur :#000 ; arrière-plan :#333 ; police :gras 24px/2 "Microsoft Yahei",Arial ;
retrait de texte : 2em ;
texte-ombre:noir 2px 2px 2px;
L'effet est le suivant :
Cet attribut est actuellement pris en charge par la plupart des navigateurs à l'exception d'IE. Pour IE, nous pouvons utiliser le filtre d'ombre pour y parvenir :
filtre : Ombre (Couleur = 'noir', Direction = '135', Force = '2')
Vous avez peut-être remarqué que l'utilisation du filtre d'ombre ne peut définir que la direction de l'angle, mais pas l'axe xy, et l'axe z a également été remplacé par la force. Notez que lorsque vous utilisez ce filtre, vous ne pouvez pas définir la couleur d'arrière-plan , sinon le filtre sera invalide ! De plus, si vous n'êtes pas très bon en mathématiques et ne comprenez pas l'algorithme des fonctions trigonométriques, vous pouvez utiliser un autre filtre d'IE : dropshadow :
filtre : dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
Eh bien, IE nous retiendra toujours, mais il convient de mentionner que ces deux filtres d'IE prennent en charge les ombres multicouches ! Par exemple, vous pouvez écrire :
filtre : dropshadow (OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='jaune', Positive='true')
dropshadow(OffX=2, OffY=2, Color='bleu', Positive='true');
Pour en savoir plus sur ces deux filtres pour IE, consultez : Shadow et Dropshadow
Regardons un exemple d'ombres multicouches (en ignorant IE ici) :
h1{font:bold 32px/2 Verdana, Genève, sans-serif couleur:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
L'effet est comme le montre la figure :
Ici, nous utilisons la couleur rgba, qui est une méthode de déclaration simultanée de couleur et de transparence en CSS, et est un attribut de couleur pris en charge par la plupart des navigateurs de niveau A ( sauf IE ). Pour plus d'informations, veuillez consulter : Couleur "RGBa". prise en charge du navigateur》——Dans le même temps, nous vous recommandons d'utiliser cette méthode d'écriture simple pour la translucidité des couleurs unies.
Compatibilité du navigateur pour text-shadow
Actuellement, text-shadow est pris en charge par Firefox 3.5+, Safari 1.1+/chrome 2.0+ et opera 9.5, mais n'est pas pris en charge par IE. Il convient de noter que seul Safari 4.0 prend en charge les ombres multicouches.
Toutes les versions d'IE ne prennent pas en charge text-shadow ;
Opera 9.5+ prend en charge jusqu'à 6 à 9 couches d'ombres et utilise l'ordre de rendu CSS2 (la première ombre définie est en bas). Et pour des raisons de performances, le rayon de flou est limité à 100px ;
Gecko (Firefox) supporte théoriquement une infinité de couches d'ombres de texte (mais il n'est pas recommandé d'essayer) et suit le nouvel ordre de rendu CSS3 (l'ombre définie en premier est en haut) ;
Safari 1.1-3.2 ne prend en charge qu'une seule couche d'ombre de texte (seule la déclaration avant la première virgule est affichée et ce qui suit est ignoré). Safari 4.0+ ne prend en charge que les ombres multicouches et le nouvel ordre de rendu CSS3 ;
boîte-ombre
Parlons d'abord d'IE. IE ne prend pas en charge l'attribut box-shadow, mais les deux filtres mentionnés ci-dessus peuvent être utilisés pour obtenir des effets d'ombre. Cela signifie qu'IE ne fait pas de distinction entre l'ombre du texte et l'ombre de la boîte ! Cela crée quelques problèmes : le texte à l'intérieur de l'élément hérite des paramètres d'ombre de l'élément. Mais si vous ne définissez pas l'arrière-plan et la bordure de l'élément, seule l'ombre du texte apparaîtra. Si vous définissez uniquement l'attribut background sans définir la bordure, seule l'ombre de la boîte apparaîtra et le texte n'aura pas d'ombre ; si vous définissez uniquement l'attribut de bordure et si l'arrière-plan n'est pas défini, l'ombre de la boîte apparaîtra et le contenu du texte et des images aura également des ombres. Les étudiants intéressés peuvent essayer.
D'accord, oublions maintenant IE et jetons un œil à box-shadow. En fait, après avoir compris text-shadow, box-shadow est facile à comprendre. Actuellement, seuls Firefox et Safari/Chrome prennent en charge l'attribut box-shadow via des attributs privés. Bien que le navigateur Opera ne supporte pas actuellement cet attribut, il est mentionné dans sa documentation que la prochaine version du moteur Presto 2.3 (la dernière version du moteur d'Opera 10.10 est Presto 2.2.15) supportera box-shadow, puis Let nous attendons lentement.
La syntaxe de box-shadow est la même que celle de text-shadow.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px noir ;
-moz-box-shadow:2px 2px 2px noir ;
...
}
En fait, box-shadow et border-radius sont de bons partenaires :
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
rayon de bordure : 10 px ;
bordure : 1px ddd solide ;
-webkit-box-shadow:0 0 10px noir ;
-moz-box-shadow:0 0 10px noir ;
remplissage : 10 px ;}
L'effet est comme le montre la figure :
Firefox n'a commencé à prendre en charge box-shadow que dans la version 3.5, et le rendu actuel des ombres n'est pas encore parfait.
Résumer
CSS shadow est une fonctionnalité très utile dans CSS3. Nous pouvons déjà utiliser text-shadow dans Firefox/webkit/Opera, et box-shadow sera bientôt implémenté dans ces navigateurs. Seul IE est unique et insiste encore sur ses filtres merdiques. C'est vraiment un échec.