Cross browser Curva di testo CSS 3

Sul mio sito web, sto usando una sfumatura di testo per l'intestazione, ma funziona solo su Chrome e probabilmente su Safari (anche se non l'ho testato), di seguito è riportato il codice che sto usando per il gradiente. Mi chiedevo se ci fosse un modo per ottenere lo stesso effetto simile a quello che avrebbe funzionato su tutti e 3 i browser?Cross browser Curva di testo CSS 3

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

EDIT: Il problema con l'altra soluzione che è stato pubblicato è che funziona solo su uno sfondo bianco, come qualcuno ha detto nei commenti, che non è un bene per me come sto usando un grigio sfondo.

fonte

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 Apparentemente è una cosa del webkit –

Cosa intendi con "tra tutti e 3 i browser"? Ci sono più di tre browser sul mercato di uso comune. – Spudley

Se si desidera far funzionare tutto questo nei browser non-WebKit, è necessario utilizzare una soluzione diversa da CSS.

Ci sono alcune soluzioni JavaScript, oppure è possibile utilizzare SVG.

Ecco un buon post sul blog su come farlo: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Utilizzando JavaScript ha il rovescio della medaglia ... utilizzando JavaScript, ma alla fine della giornata questo è solo un effetto visivo decorativo.

fonte

2013-08-23 13:20:04 thirtydot

SVG era la risposta alla fine – Harry12345

-moz-background-clip: il testo non funziona su firefox e non sarà possibile ottenere l'effetto di ritaglio in Firefox.

È possibile utilizzare cufon per i gradienti di testo, e thay lavorerà su IE, Chrome e Firefox

fonte

2013-08-23 12:44:22 psd2htmldepot

Cross browser Curva di testo CSS 3

risposta

Problemi correlati