Récemment, j'ai dû installer Firefox 3.5 parce que je voulais installer Firebug 1.4 , donc je suis accidentellement entré en contact avec la belle ombre de texte en arrière-plan de WordPress. C'est aussi la propriété text-shadow en CSS. J'ai donc compilé quelques informations aujourd'hui. J'espère que cela pourra être une source d'inspiration pour tout le monde.
Tout d’abord, jetons un coup d’œil à la partie où text-shadow est utilisé dans le backend de WordPress 2.8 (flèche verte). Qu’en pensez-vous ? Oui, ce sont des propriétés CSS3, pas des images.
Qu'est-ce que l'ombre de texte ?
text-shadow existait déjà dans CSS2, et maintenant CSS3 se prépare à l'ajouter. Et comme seul Safari a toujours pris en charge cet attribut, nous voyons rarement de vraies applications jusqu'à récemment, lorsque sa prise en charge par Firefox 3.5 a éveillé l'intérêt des gens. dedans.
text-shadow peut prendre en charge l'ajout d'une ombre au texte, afin que nous puissions utiliser les attributs CSS3 pour augmenter la texture du texte pendant la conception sans utiliser d'images.
Les navigateurs actuellement pris en charge incluent Firefox 3.1+, Safari 3+, Opera 9.5+ et d'autres navigateurs modernes (les données peuvent être biaisées). Bien entendu, la famille IE ne peut pas les prendre en charge.
Ensuite, regardez la syntaxe de text-shadow :
text-shadow:couleur longueur longueur longueur;
couleur : la couleur ; la longueur fait respectivement référence à " longueur de la direction de l'axe X longueur de la direction de l'axe Y rayon de flou d'ombre " dans l'ordre
Les valeurs positives sur l'axe X signifient vers la droite et les valeurs négatives vers la gauche. De la même manière, les valeurs négatives sur l'axe Y signifient vers le haut. N'importe laquelle des valeurs peut être nulle. ou vide (sera traité par défaut)
Par exemple:
texte-ombre : -1px 2px 3px #ffb69a ;
Cela signifie que l'ombre est de 1 px vers la gauche dans la direction de l'axe X, de 2 px vers le bas dans la direction de l'axe Y, et que le rayon de flou de l'ombre est de 3 px et que la couleur est #ffb69a.
Quelques expériences et démos
J'ai fait une petite expérience et créé une page de démonstration . Afin de permettre aux utilisateurs dont les navigateurs ne prennent pas en charge l'ombre de texte de voir l'effet d'ombre, veuillez regarder la capture d'écran ci-dessous (un ami a dit que le "Firebird" ressemble à du "poulet"). :
Si vous utilisez Firefox 3.1+, Safari et d'autres navigateurs, veuillez cliquer directement sur Démo .