Vor kurzem musste ich Firefox 3.5 installieren, weil ich Firebug 1.4 installieren wollte, also bin ich zufällig mit dem schönen Textschatten im WordPress-Hintergrund in Berührung gekommen. Es ist auch die Textschatteneigenschaft in CSS. Deshalb habe ich heute einige Informationen zusammengestellt. Ich hoffe, es kann für alle eine Inspiration sein.
Schauen wir uns zunächst den Teil an, in dem Textschatten im Backend von WordPress 2.8 verwendet wird (grüner Pfeil). Ja, das sind CSS3-Eigenschaften, keine Bilder.
Was ist Textschatten?
text-shadow existierte bereits in CSS2 und CSS3 bereitet sich nun darauf vor, es hinzuzufügen. Und da dieses Attribut immer nur von Safari unterstützt wurde, sahen wir selten echte Anwendungen, bis die Unterstützung von Firefox 3.5 dafür wiederbelebt wurde darin.
text-shadow kann das Hinzufügen von Schatten zu Text unterstützen, sodass wir CSS3-Attribute verwenden können, um die Texttextur während des Designs zu erhöhen, ohne Bilder zu verwenden.
Zu den derzeit unterstützten Browsern gehören Firefox 3.1+, Safari 3+, Opera 9.5+ und andere moderne Browser (die Daten können natürlich verzerrt sein, die IE-Familie kann dies nicht unterstützen).
Schauen Sie sich als Nächstes die Syntax von text-shadow an:
text-shadow:color Länge Länge Länge;
Farbe: Farbe; Länge bezieht sich jeweils auf „ Länge in X-Achsen-Richtung, Länge in Y-Achsen-Richtung, Schattenunschärferadius “.
Positive Werte auf der X-Achse bedeuten nach rechts und negative Werte nach links. Ebenso können negative Werte auf der Y-Achse nach oben bedeuten oder leer (wird standardmäßig verarbeitet)
Zum Beispiel:
Textschatten: -1px 2px 3px #ffb69a;
Dies bedeutet, dass der Schatten in Richtung der X-Achse 1 Pixel nach links und in Richtung der Y-Achse 2 Pixel nach unten verläuft, der Schattenunschärferadius 3 Pixel beträgt und die Farbe #ffb69a ist
Einige Experimente und Demos
Ich habe ein kleines Experiment durchgeführt und eine Demoseite erstellt. Damit Benutzer, deren Browser Textschatten nicht unterstützen, den Schatteneffekt sehen können, schauen Sie sich bitte den Screenshot unten an (ein Freund sagte, dass der „Feuervogel“ wie „Huhn“ aussieht). :
Wenn Sie Firefox 3.1+, Safari und andere Browser verwenden, klicken Sie bitte direkt auf Demo .