Gradiente de color de texto CSS3 puro - ¿Es posible?

¿Existe alguna manera de crear un degradado de color de texto CSS3 cruzado y puro?Gradiente de color de texto CSS3 puro - ¿Es posible?

Así, no png's. No solo 'webkit'.

EDITAR: Para ser más precisos: es solo CSS3, y es para texto, no para cuadros degradados.

EDIT: He encontradothis solution, pero es sólo para webkit.

Fuente

2011-01-19 Kriem

través de la cual navegadores? los que soportan CSS3? – zzzzBov

@zzzzBov - Sí. :) – Kriem

¿El fondo es un color sólido? –

No hay una forma de navegador cruzado para hacer esto fuera de webkit porque solo webkit tiene actualmente un background-clip: text, y this extension to background-clip no está en la pista de estándares (hasta donde yo sé). Si desea relajar su requisito de CSS3, puede lograr el mismo efecto entre navegadores con Canvas (o SVG), pero entonces solo está hablando de navegadores compatibles con HTML5.

Fuente

2011-01-20 05:57:42

No hay una forma de CSS "pura" en este momento, pero hay una forma de usar CSS y una cierta duplicación de contenido. Consulte my server side css gradient text solution here, que no requiere JavaScript o fondo simple. También puede hacer este lado del cliente usando JavaScript, vea lo que Dragonlabs ha hecho here.

Fuente

2011-10-17 16:19:12

Muy impresionante e intuitivo. Gracias por esta opción –

Disculpe el doble comentario, pero pensé que podría ser útil agregar rápidamente mi variación de su solución: http://jsfiddle.net/P8k58/. Usé algunos trucos para que funcione correctamente y para mis propósitos usé una sombra de texto para finalizar el efecto. Con el propósito de simplemente crear un brillo, sin embargo, esto podría hacerse fácilmente solo con contenido CSS (IE 8+ en el mejor de los casos). –

@JosephMarikle Gracias. Y me gusta su uso de: antes y después. –

Como ya he señalado como un comentario en la respuesta de zzzzBov, hay una manera de lograr un degradado de texto en CSS3 solamente.

Si lleva el PNG solution un poco más lejos, puede hacer el mismo truco con los gradientes de css3.

Por supuesto, esto solo funciona para texto que tiene un color de fondo uniforme.

Fuente

2012-02-28 16:58:07 enyo

-1

mejor solución en el momento es usar un color sólido como fallback no webkit y luego usar la siguiente técnica (requiere 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>

Fuente

2016-05-20 00:57:39 sean2078

no funciona en navegadores que no sean webkit. – user2602584

Ya señalé que "requiere webkit" ..¿Tuviste una mejor solución? Funciona en FF, Chrome y Safari .. @ usuario2602584 usuario deficiente – sean2078

Gradiente de color de texto CSS3 puro - ¿Es posible?

Respuesta

Cuestiones relacionadas