Designer verwenden oft einige einzigartige Schrifteffekte und Seiteneffekte, und Schatten ist einer davon. Er kann dem Text und den Elementen auf der Seite einen dreidimensionalen Effekt verleihen und ihn hervorheben. Bei Textschatten kann die herkömmliche Methode beispielsweise das Ausschneiden des Textes und die direkte Verwendung von Bildern erfordern. Unter Berücksichtigung von SEO und Website-Performance können auch Technologien wie CSS Sprites zur Integration von Bildern verwendet werden:
h2{background:url(sprites.png) no-repeat 0 0; text-indent:-9999em;...}
h2#title1{Hintergrundposition:0 -30px;}
h2#title2{Hintergrundposition:0 -60px;}
....
Das ist eine knifflige Sache, das Zusammenfügen von Bildern wird viel Zeit in Anspruch nehmen und um bessere visuelle Effekte zu erzielen, müssen Sie möglicherweise hochwertige 32-Bit-PNG-Bilder verwenden, was Sie mit dem verdammten IE 6 PNG konfrontiert Transparenzproblem!
Tatsächlich können wir CSS vollständig verwenden, um den Schatteneffekt von Text zu erzielen!
Sie können sich zunächst die Demo ansehen.
Textschatten
Mit text-shadow können wir perfekte Textschatteneffekte erzielen. Grundlegendes Schreiben:
text-shadow:[Farbe x-Achse y-Achse Unschärferadius],[Farbe x-Achse y-Achse Unschärferadius]...
oder
text-shadow:[Farbe des Unschärferadius der x-Achse, y-Achse],[Farbe des Unschärferadius der x-Achse, y-Achse]...
Die Farbe hier ist die Farbe des Schattens. Sie können die Farbe zuerst oder zuletzt schreiben. Die x-Achse und die y-Achse sind jeweils die Versatzpositionen des Schattens, und der Unschärferadius kann als Länge des Schattens verstanden werden. Und die meisten Browser unterstützen mittlerweile mehrschichtige Schatten. Sie können mehrere Gruppen von Einstellungen durch Kommas trennen (natürlich können Sie auch nur eine einzelne Einstellung verwenden).
Beispiel:
h1{color:#000; Hintergrund:#333; Schriftart:bold 24px/2 „Microsoft Yahei“,Arial;
Texteinzug:2em;
text-shadow:black 2px 2px 2px }
Der Effekt ist wie folgt:
Dieses Attribut wird derzeit von den meisten Browsern außer dem IE unterstützt. Für den IE können wir den Schattenfilter verwenden, um dies zu erreichen:
Filter: Schatten (Farbe='Schwarz', Richtung='135', Stärke='2')
Möglicherweise ist Ihnen aufgefallen, dass mit dem Schattenfilter nur die Winkelrichtung, nicht jedoch die xy-Achse definiert werden kann und auch die z-Achse durch Stärke ersetzt wurde. Beachten Sie, dass Sie bei Verwendung dieses Filters die Hintergrundfarbe nicht festlegen können , da der Filter sonst ungültig wird! Wenn Sie nicht sehr gut in Mathematik sind und den Algorithmus trigonometrischer Funktionen nicht verstehen, können Sie außerdem einen anderen Filter von IE verwenden: dropshadow:
Filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
Nun, der IE wird uns immer zurückhalten, aber es ist erwähnenswert, dass diese beiden Filter des IE mehrschichtige Schatten unterstützen ! Sie können zum Beispiel schreiben:
Filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
Weitere Informationen zu diesen beiden Filtern für den IE finden Sie unter: Shadow und Dropshadow
Schauen wir uns ein Beispiel für mehrschichtige Schatten an (IE wird hier ignoriert):
h1{font:bold 32px/2 Verdana, Genf, serifenlose Farbe:#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);}
Der Effekt ist wie in der Abbildung dargestellt:
Hier verwenden wir RGBA-Farbe, eine Methode zum gleichzeitigen Deklarieren von Farbe und Transparenz in CSS und ein Farbattribut, das von den meisten A-Level-Browsern ( außer IE ) unterstützt wird. Weitere Informationen finden Sie unter „RGBa“-Farbe Browser-Unterstützung》––Gleichzeitig empfehlen wir die Verwendung dieser einfachen Schreibmethode für die Durchsichtigkeit von Volltonfarben.
Browserkompatibilität für Textschatten
Derzeit wird Text-Shadow von Firefox 3.5+, Safari 1.1+/Chrome 2.0+ und Opera 9.5 unterstützt, jedoch nicht vom IE. Es ist zu beachten, dass nur Safari 4.0 mehrschichtige Schatten unterstützt.
Alle IE-Versionen unterstützen Textschatten nicht;
Opera 9.5+ unterstützt bis zu 6–9 Schattenebenen und verwendet die CSS2-Rendering-Reihenfolge (der erste definierte Schatten befindet sich unten). Aus Leistungsgründen ist der Unschärferadius auf 100 Pixel begrenzt;
Gecko (Firefox) unterstützt theoretisch unendlich viele Ebenen von Textschatten (es wird jedoch nicht empfohlen, es auszuprobieren) und folgt der neuen CSS3-Rendering-Reihenfolge (der zuerst definierte Schatten liegt oben).
Safari 1.1-3.2 unterstützt nur eine einzelne Textschattenebene (nur die Deklaration vor dem ersten Komma wird angezeigt und das Folgende wird ignoriert). Safari 4.0+ unterstützt nur mehrschichtige Schatten und die neue CSS3-Rendering-Reihenfolge;
Kastenschatten
Lassen Sie uns zunächst über den IE sprechen. Der IE unterstützt das Box-Shadow-Attribut nicht, aber die beiden oben genannten Filter können verwendet werden, um Schatteneffekte zu erzielen. Das bedeutet, dass der IE nicht zwischen Textschatten und Boxschatten unterscheidet ! Dies führt zu einigen Problemen: Der Text innerhalb des Elements erbt die Schatteneinstellungen des Elements. Wenn Sie jedoch den Hintergrund und den Rahmen des Elements nicht definieren, wird nur der Textschatten angezeigt. Wenn Sie nur das Hintergrundattribut definieren, ohne den Rahmen zu definieren, wird nur der Rahmenschatten angezeigt und der Text hat keinen Schatten Wenn Sie nur das Randattribut definieren und der Hintergrund nicht definiert ist, wird der Rahmenschatten angezeigt, und der Inhaltstext und die Bilder haben ebenfalls Schatten. Interessierte Studierende können es ausprobieren.
Okay, jetzt vergessen wir den IE und werfen einen Blick auf Box-Shadow. Tatsächlich ist Box-Shadow nach dem Verständnis von Text-Shadow leicht zu verstehen. Derzeit unterstützen nur Firefox und Safari/Chrome das Box-Shadow-Attribut über private Attribute. Obwohl der Opera-Browser dieses Attribut derzeit nicht unterstützt, wird in seiner Dokumentation erwähnt, dass die nächste Version der Engine Presto 2.3 (die neueste Version der Engine von Opera 10.10 ist Presto 2.2.15) Box-Shadow und dann Let unterstützen wird wir warten langsam.
Die Syntax von box-shadow ist die gleiche wie text-shadow.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px schwarz;
-moz-box-shadow:2px 2px 2px schwarz;
...
}
Tatsächlich sind Box-Shadow und Border-Radius gute Partner:
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
Randradius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px schwarz;
-moz-box-shadow:0 0 10px schwarz;
padding:10px;}
Der Effekt ist wie in der Abbildung dargestellt:
Firefox unterstützt Box-Shadow erst seit Version 3.5 und die aktuelle Darstellung von Schatten ist noch nicht perfekt.
Zusammenfassen
CSS Shadow ist eine sehr nützliche Funktion in CSS3. Wir können Text-Shadow bereits in Firefox/Webkit/Opera verwenden, und Box-Shadow wird bald in diesen Browsern implementiert. Nur der IE ist einzigartig und besteht immer noch auf seinen beschissenen Filtern. Das ist wirklich ein Misserfolg.