Vergleich zweier Methoden für den CSS-Gradiententexteffekt_Erfahrungsaustausch

Möchten Sie einen Titeltext mit Farbverlauf erstellen, ohne Photoshop zu verwenden? Hier ist eine einfache CSS-Technik, die Ihnen zeigt, wie Sie diesen Effekt nur mit CSS- und PNG-Bildern erstellen. Diese Methode wurde für die meisten Mainstream-Anwendungen getestet Natürlich erfordert IE6 einen Hack, der transparentes PNG unterstützt (Glücklicherweise arbeitet Microsoft hart daran, den IE6 der Benutzer automatisch auf IE7 zu aktualisieren^.^, Erweiterte Lektüre: Warnung: Ein IE7-Auto-Update ist bald verfügbar)

Vorteile

Dies ist ein reiner CSS-Trick, ohne Verwendung von Ja-Skript oder Flash, und er kann in den meisten Browsern normal funktionieren (IE6 erfordert einen Hack, der transparentes PNG unterstützt)
Dies ist der perfekte Titel Beim Entwerfen müssen Sie kein Photoshop verwenden, was Ihnen viel Bandbreite und Zeit spart.
Sie können diesen Effekt mit jeder Webschriftart verwenden, und die Schriftgröße ist auch variabel Arbeit?

Der Trick ist einfach. Wir verwenden einfach ein 1 Pixel breites transparentes PNG über dem Text CSS-Verlaufstext

CSS

Der Schlüssel ist hier:

h1 { position: relative }
h1 span { position: absolute } h1 {
Schriftart: fett 330 %/100 % „Lucida Grande“;
Farbe: #464646;
h1 span {
Hintergrund: URL (gradient.png) wiederholen-x ;
Position: absolut;
Breite: 100 %;
Höhe: 31px; Hier können Sie sich das Beispiel ansehen.

Aktivieren Sie es, um IE6 zu unterstützen

Der folgende Hack dient lediglich dazu, IE6 für die Unterstützung transparenter Bilder im PNG-24-Format zu aktivieren







jQuery-generierte Version

Wenn Sie keine leeren
-Tags in Ihrem Code haben möchten, können Sie Javascript verwenden um es dynamisch zu generieren. Hier ist eine einfache JQuery-Produktionsmethode