Cross browser CSS 3 Text Farbverlauf

Auf meiner Website verwende ich einen Textgradienten für die Überschrift, aber es funktioniert nur auf Chrome und wahrscheinlich Safari (obwohl ich es nicht getestet habe), unten ist der Code, den ich bin Verwenden für den Gradienten. Ich habe mich gefragt, ob es einen Weg gibt, den gleichen/ähnlichen Effekt zu erzielen, der über alle 3 Browser hinweg funktioniert.Cross browser CSS 3 Text Farbverlauf

 background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;

EDIT: Das Problem mit der anderen Lösung, die gebucht worden ist, dass es nur auf einem weißen Hintergrund arbeitet, wie jemand in den Kommentaren gesagt, was nicht gut für mich ist, wie ich ein graues bin mit Hintergrund.

Quelle

2013-08-23 Harry12345

http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-pure-css-without-using-background-image – Xareyo

http://stackoverflow.com/questions/8384751/css-text -gradient Anscheinend ist es eine Webkit-Sache –

Was meinst du "über alle 3 Browser"? Es gibt mehr als drei Browser auf dem Markt im allgemeinen Gebrauch. – Spudley

Wenn Sie dies in nicht-WebKit-Browsern arbeiten möchten, benötigen Sie eine andere Lösung als CSS zu verwenden.

Es gibt einige JavaScript-Lösungen, oder Sie können SVG verwenden.

Hier ist eine gute Blog-Post auf, wie es geht: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Mit JavaScript, um die Kehrseite der Medaille ... mit JavaScript, aber am Ende des Tages ist dies nur eine dekorative Optik.

Quelle

2013-08-23 13:20:04 thirtydot

SVG war die Antwort am Ende – Harry12345

-moz-Hintergrund-Clip: Text funktioniert nicht auf Firefox, und Sie werden nicht in der Lage, Clipping-Effekt in Firefox zu erreichen.

Sie cufon für die Text Gradienten verwenden können, und Thay arbeiten auf IE, Chrome und Firefox

Quelle

2013-08-23 12:44:22 psd2htmldepot

Cross browser CSS 3 Text Farbverlauf

Antwort

Verwandte Themen