Gradiente di colore del testo CSS3 puro - È possibile?

Question

C'è un modo per creare un cross-browser, puro gradiente di colore del testo CSS3?

Quindi, no png's. Nessun "webkit" solo.

MODIFICA: Per essere più precisi: è solo CSS3, ed è per testo, non gradienti casella.

EDIT: Ho trovatothis solution, ma è solo per WebKit.

Answer 1

Non esiste un modo cross-browser per eseguire questa operazione al di fuori del webkit perché solo il webkit attualmente ha un background-clip: text e this extension to background-clip non è su traccia standard (per quanto ne so). Se vuoi rilassare i tuoi requisiti CSS3, puoi realizzare lo stesso effetto cross-browser con Canvas (o SVG), ma in questo caso stai parlando solo dei browser compatibili con HTML5.

Answer 2

Al momento non esiste una modalità CSS "pura", ma esiste un modo per utilizzare i CSS e una certa duplicazione dei contenuti. Vedi my server side css gradient text solution here, che non richiede JavaScript o sfondo chiaro. Puoi anche fare questo lato client usando JavaScript, vedi cosa ha fatto Dragonlabs here.

Answer 3

Come ho già indicato come commento nella risposta di zzzzBov, c'è un modo per ottenere un gradiente di testo solo in CSS3.

Se si prende lo PNG solution un po 'di più, si può fare lo stesso trucco con gradienti css3.

Ovviamente funziona solo per il testo su un colore di sfondo uniforme.

Answer 4

migliore soluzione al momento è quello di utilizzare un colore a tinta unita come non-webkit fallback e quindi utilizzare la seguente tecnica (richiede webkit):

h1 { 
 
    color: $333; 
 
    font-size: 72px; 
 
    background: -webkit-linear-gradient(#eee, #333); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<h1>Example</h1>