Dies ist nur für WebKit, aber es ist der sauberste Weg, dies zu erreichen, da der Text bearbeitbar und als normaler Webtext auswählbar bleibt.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Sieht sehr gut aus. Wird Magie mit Logos vollbringen (obwohl es nur Webkit ist xD)
Diese Methode hat also den einen Nachteil/ text-shadow ist nicht kompatibel mit diesen Eigenschaften
Text zweimal rendern, den zweiten Text absolut positionieren, sodass sie übereinander liegen. Dann dem unteren Text einen text-shadow geben. Fertig.
Gut gemacht, Jake! Ich habe das ausprobiert. Funktioniert wie ein Zauber! Highfive!
Das hat bei mir funktioniert mit
text-shadow: 4px 4px 4px schwarz;
Ich habe es bei mir mit text-shadow zum Laufen gebracht (Snippet unten)
{
text-shadow: -1px 2px rgba(128, 128, 128, 0.5);
background: -webkit-linear-gradient(whitesmoke, #1e2425);
background-clip: text;
-webkit-text-fill-color: transparent;
}
Tolle Korrektur, wie behalte ich die Hintergrundfarbe schwarz? Ich benutze das in einem Modal und wenn ich
-webkit-text-fill-color: transparent;setze, verschwindet mein schwarzer Hintergrund…Ich verstehe nicht, wie ich gleichzeitig eine Unterstreichungs-Übergangsanimation mit einem Hintergrund hinzufügen kann.
Wow! Das ist fantastisch und danke für den Beitrag! Das kann ich für meine Website verwenden.
Hahah, wer liebt das neue Website-Design noch?
Habe es ausprobiert und bekam nur schwarzen Text mit etwas, das aussieht wie ein text-shadow von 0px -1px 1px #FFF?
Das ist wirklich unsauber, aber so sieht es aus! Habe ich einen Fehler gemacht? Ich habe exakt den Code verwendet!
Das Beispiel wird nicht wie erwartet angezeigt?
Es sieht nur wie eine einfache Überschrift aus.
Hilfe, irgendjemand?
Hmm, es funktioniert nicht, wenn Sie text-shadow angewendet haben. Es muss einen anderen Weg geben. Übrigens, die „Referenz-URL“ funktioniert nicht mehr.
Ich denke, das ist die einzige Lösung, die wirklich funktioniert hat: http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
Diese Lösung erfordert entweder, dass der Text im Voraus für Ihre :after-Regel bekannt ist, sodass sie mit dynamischer Ausgabe aus einem CMS nicht funktioniert, oder die duplizierte Inhalte in benachbarten Spans. Unter der Annahme, dass Sie Ihre schönen Verläufe auf die Schlüsselwörter Ihrer Website anwenden, bedeutet die Idee der doppelten Spans duplizierte Inhalte, die von Suchmaschinen gesehen werden, was für SEO nicht ideal ist.
Textverläufe fallen fest in die Kategorie „schön zu haben“. Ich bin froh, dass ich etwas Hübsches für einen Kunden in Chrome/Safari vorzeigen kann, und das Fallback mit normalem Text in anderen Browsern ist absolut akzeptabel.
Ich habe im Internet gesurft und bin auf diesen Thread gestoßen.
David, Sie könnten das :after-Problem in CMSs umgehen, wenn Sie
content: attr(title);verwenden. Dies würde auch mit data-Attributen funktionieren, falls Ihr title-Attribut bereits „belegt“ ist.Prost!
Das ist großartig, Aaron und Marvintus. Danke.
nicht IE(8) kompatibel
Hahaha nichts ist IE(8) kompatibel
Sicher funktioniert es nicht mit IE. Aber ich würde es trotzdem verwenden und bedingte Anweisungen anwenden… Ich bin sicher, die meisten von Ihnen tun das.
Toter Link. „Referenz-URL“
Danke, ich werde es einfach entfernen, die Demo ist sowieso ausreichend.
Danke für den Beitrag!
wie immer großartig! :)
Funktioniert nicht mit text-shadows im selben Stil :(
Ich muss vielleicht doch wieder auf PNGs zurückgreifen.
Egal, es scheint, dass jemand es bereits geknackt hat: http://stackoverflow.com/questions/3802218/how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient
Salmonface – das verwendet auch die :after-Methode. Verdammt. Also vorerst gilt für Text: Verlauf ODER Schatten/Kontur.
Tatsächlich können wir für den Moment -webkit-text-stroke verwenden (unser Kontext ist nur Webkit).
Es funktioniert nicht in Mozilla und IE.
Wie kann ich diesen Effekt in beiden oben genannten Browsern anwenden?
Wow! Das ist fantastisch und danke für den Beitrag! Das kann ich für meine Website verwenden.
Hallo!
Gibt es eine Möglichkeit, text-shadow zu Text mit Verlauf hinzuzufügen? Ich habe es versucht, aber der Schatten liegt vor dem Text…
Hallo Alex. Das geht, aber es erfordert etwas mehr Markup. Schauen Sie hier. Grüße!
Tolle Technik, aber ich habe das gerade auf einem Retina-Display-iPad getestet und der Text sieht verschwommen aus, besonders beim Hineinzoomen – als wäre es tatsächlich ein Bitmap-Bild.
Ich werde weiter spielen, um zu sehen, ob es eine Lösung gibt, es sei denn, jemand kann mich aufklären?
Ich habe die Seite mit dem neuesten Google Chrome (Version 19) getestet und der Text ist komplett unsichtbar. Bitte um Rat, gibt es eine andere Möglichkeit, Textverläufe zu erzielen?
Sah gut aus, bis ich einen weißen text-shadow hinzufügte, dann wurde es vermasselt. Ich wünschte, die für CSS Verantwortlichen und die Browserentwickler würden sich endlich einmal zusammenraufen und diese Dinge reparieren… das ist elementare Seitenlayout-Sache seit Pagemaker… es ist keine Raketenwissenschaft!
Das funktioniert jedoch nicht mit text-shadows.
Der perfekte 3D-Text ist zu sehen unter: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
Sie verwenden eine schöne :after Pseudo-Klasse, um den text-shadow zu erreichen.
Aber ich habe immer noch festgestellt, dass Sie keine Zeilenumbrüche einfügen können, wenn Sie mehrzeilige Verlaufstexte benötigen. Ich habe sowohl mit \n als auch mit \r versucht, beides funktioniert nicht.
Wenn jemand eine Lösung dafür findet, bitte benachrichtigen Sie mich.
Gibt es Lösungen, um text-shadow zu Text mit Verlauf hinzuzufügen?
Toller Beitrag!
Mein Firefox-Browser hat Probleme mit der Anzeige der Verläufe – weiß jemand, ob es ein Snippet für FF gibt?
Danke! :)
Sehr hilfreich. Danke!
JA BABY! Das ist großartig. Sie können coole, aber sinnlose Sachen wie diese machen
http://jsfiddle.net/hzNmQ/
Ausgezeichnet. Aber funktioniert nur in Chrome. Nicht in Firefox.
oder dieses http://jsfiddle.net/kk5eG/
Ich habe ein einfaches SCSS-Mixin geschrieben, das diesen Trick mit einem coolen Nicht-WebKit-Fallback kombiniert, der Ihre 2 Farben bei 50 % mischt.
@mixin lineartextgradient($color1, $color2, $startPoint:left top, $endPoint:left bottom) { color: mix($color1, $color2); background: -webkit-gradient(linear, $startPoint, $endPoint, from($color1), to($color2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }Eigentlich funktioniert das nicht in Safari
Wie ich Alex bereits sagte, gibt es eine Möglichkeit, einen text-shadow-ähnlichen Effekt mit einem absolut positionierten Span innerhalb des Überschriften-Tags zu erzielen. Hier ist ein funktionierendes JSFiddle.<br/>
Prost!
Funktioniert nur in Chrome
Es funktioniert auch in Edge, dem neuen Browser, der mit Windows 10 geliefert wird, der anscheinend Webkit-basiert ist, da Sie das Vendor-Präfix -webkit- benötigen.
Zu gut, mein Herr, danke
Das funktioniert nicht für Mozilla, nur für Chrome und Safari?? Haben Sie eine Technik, um es auch in Mozilla anzuzeigen..
Hallo, gibt es eine Idee für einen Randverlauf.
Ich weiß nicht, ob das schon jemand gefragt hat, aber funktioniert dieser Gradient-Trick in Mozilla? Ich habe -webkit durch -moz ersetzt und dachte, es würde genauso aussehen, aber der Verlauf erscheint als Farbverlaufsfeld hinter dem Buchstaben, anstatt den Buchstaben mit dem Verlauf zu füllen.
Was ist mit der Cross-Browser-Kompatibilität?
Ganz oben steht: „Nur für WebKit“ – das bedeutet, es funktioniert nicht in Firefox oder Safari und definitiv nicht in IE.
Das schlägt auf dem nativen Android-Browser kläglich fehl. Der Verlauf wird angezeigt, aber nur als ein großer Verlaufblock.
Toller Beitrag!! Weiter so!!
Aber was ist mit Mozilla & Opera…. Gibt es eine Lösung??
Hmmm schön!! Aber…warte auf die Unterstützung aller Browser
Danke fürs Teilen :)
Es gibt ein Problem, wenn Sie die Eigenschaft „text-shadow“ hinzufügen.
Funktioniert nicht in IE10…andere sind weit entfernt
Haben Sie eine Technik, um es auch in Mozilla anzuzeigen? Es funktioniert richtig in Chrome.
Dies ist nicht mehr „nur WebKit“. „Opera“ hat dieses Präfix auch übernommen, aber es funktioniert nicht…
Hier ist eine Demo von Verlaufstext + text-shadow http://jsfiddle.net/2GgqR/258/
Hallo, es funktioniert bei mir! Aber ist es möglich, von hier aus einen horizontalen Verlauf zu machen?
Vielen Dank!
Nub
Fügen Sie einfach „links“ oder „rechts“ hinzu, so wie hier
background: -webkit-linear-gradient(right, #FC3,#FC3,#fff);
Gute Arbeit… Weiter so….
Danke
h3{font-family: ‚Black Ops One‘, cursive;
font-size:50px;
background: -webkit-linear-gradient(#fff, #FC3,#FC3,#fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Zeigt nur einfachen schwarzen Text!!!!!!!!!!!
In Chrome und Opera ist es gut, aber in Firefox gibt es keine Wirkung : (
Bitte finden Sie eine Lösung für den Textverlauf in Mozilla.
Funktioniert nur in Chrome, nicht einmal in Mozilla.
Das funktioniert mit Edge, dem Browser, der mit Windows 10 geliefert wird. Danke!
Sie benötigen nur das Vendor-Präfix für -webkit-background-clip: text;
-webkit-text-fill-color: transparent.
Toller Beitrag!
Danke!
Cool für die Verwendung in Android-Browsern.
Es wird nicht in Mozilla Firefox unterstützt.
Für Mozillianer gibt es hier ein funktionierendes Codepen
http://codepen.io/giana/pen/RPdLaQ
Sie sind einfach brillant… funktioniert in Chrome, Firefox und Safari
Hey! Das ist nur für Chrome….
Hey! „Dies ist nur für WebKit…“ – Chris Coyier
Webkit ist Chrome, wahr…. aber BONUS! … Sie bekommen auch Safari!
Und wie bei allen Browser-Präfix-Eigenschaften sind einfache Fallbacks so einfach zu implementieren! Geben Sie Ihrem Text einfach eine Farb-Eigenschaft vor den gradientenbezogenen Eigenschaften und Sie erhalten eine schöne Volltonfarbe in den Browsern, die kein Webkit unterstützen.
Schließlich ist mit Farbverläufen gefüllter Text eine Art Fetisch, äh… ich meine, eine nicht wesentliche Stilisierung. Wenn Sie es wirklich haben müssen, könnten Sie ein SVG-Element verwenden und beliebige Spielereien, äh… Styling anwenden, das Sie möchten!! Grüße!
Hallo Leute!
Nur um ein Update für Firefox für die nächsten Leser zu geben..
FUNKTIONIERT mit FF 49.0.2 (auf Mac?!) ..?!
Wie ich gelesen habe, übernimmt Firefox immer mehr Webkit-Standards. Wenn IE das auch unterstützt und mehr Webkit übernimmt – sind wir gut.
An EZKAY — Zum Zeitpunkt Ihres Beitrags — Erwarten Sie nicht, dass MS dies zu IE hinzufügt, da die Entwicklung eingestellt wurde — abgesehen von seltenen Sicherheitskorrekturen.
MS Edge sollte dies irgendwann in der Zukunft zulassen. Zum Zeitpunkt meines Beitrags zeigt Edge immer noch eine einfache Schriftfarbe an.
Wenn Sie LINGTALFIs CodePen von oben laden, wird dieser Code ausreichend auf Standardfarben reduziert.
Gibt es eine Problemumgehung, damit es in Webkit-Browsern gut aussieht, aber in anderen immer noch als Volltext erscheint? Die Buchstaben sind in IE vorhanden, aber sie sind nicht sichtbar, es sei denn, man markiert sie.
Das ist großartig! Das ist es, wonach ich gesucht habe.
Für alte Browser wie IE können wir SVG verwenden
Verwenden Sie dies, wenn dies nicht funktioniert
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
h1{
text-transform: uppercase;
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: {
size: 20vw;
};
}
Danke fürs Teilen, ich habe es in Chrome 69 64 Bit versucht, es funktioniert überhaupt nicht.
Ich habe vor vielleicht 5-6 Jahren eine Bibliothek erstellt, vielleicht ist sie nützlich (zumindest als Inspiration) für jemanden, genannt Gradext.
Animieren Sie Verläufe auf Text, linear, radial, horizontal, vertikal! Wie auch immer.
Schön, ist es möglich, damit einen diagonalen Verlauf zu erstellen?
Schön, danke!) Habe gerade herausgefunden, wie man einen Verlauf von Seite zu Seite mit Text verwendet.
Es funktioniert nicht, wenn „text-shadow“ angewendet wird. Text-shadow überlagert die Farbe.
Was wäre ein Fallback für Browser, die den Text einfach transparent anzeigen (Safari Mobile)?
Nvm, ich habe herausgefunden, dass -webkit-text-fill-color: transparent; den Text auf mobilem Safari unsichtbar machte, aber er ist notwendig, um den Verlauf in Firefox und Edge beizubehalten. Ich habe die Zeile beibehalten und das Folgende verwendet, um sie für mobile Safari zu entfernen
@supports (-webkit-overflow-scrolling: touch) {
-webkit-text-fill-color: unset;
}
Lassen Sie mich wissen, wenn jemand eine bessere Lösung findet
Das war sehr hilfreich! Ich habe es schließlich für ein Font Awesome-Icon verwendet und es hat großartig funktioniert!
Wird es in IE11 funktionieren? Ich habe es versucht, aber kein Glück.
Wenn Sie es für IE11 machen können, können Sie uns das bitte mitteilen
Ich frage mich, wie das auf einem Druckmedium möglich wäre. Wenn ich versuche, es zu drucken oder ein PDF über den macOS-Drucken-Dialog in Safari zu erstellen, wird der Schrifttext nicht angezeigt. Ich muss background, -webkit-background-clip und -webkit-text-fill-color zurücksetzen, um die Standard-Dokument-Schriftfarben zu erhalten.
Mann, wie ändere ich die Gradientenrichtung mit dieser Methode?
Danke
Fügen Sie einfach 90 oder 180 Grad vor der Farbe in der Klammer hinzu
Hey danke! Aber wie können wir den Verlauf horizontal einstellen?
Ich benutze denselben Code
Aber wenn ich die Überschrift mit der Maus auswähle, verschwindet der Text und nur die blaue Hervorhebung bleibt bestehen.