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

degradado transparente css

Question

¿Hay una manera de crear un degradado de color de texto puro CSS3 en todos los navegadores?

Por lo tanto, no png''s. No solo ''webkit''.

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

EDIT: encontré esta solución , pero es solo para webkit.

Answer 1

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

Si lleva la solución PNG un poco más lejos, puede hacer el mismo truco con gradientes css3.

Por supuesto, esto solo funciona para el texto que está en un color de fondo uniforme.

Answer 2

La mejor solución en este momento es usar un color sólido como no alternativo de 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>

Answer 3

No hay una forma CSS "pura" en este momento, pero hay una forma de usar CSS y cierta duplicación de contenido. Vea mi solución de texto con gradiente css del lado del servidor aquí , que no requiere JavaScript o fondo liso. También puede hacer este lado del cliente utilizando JavaScript, vea lo que Dragonlabs ha hecho here .

Answer 4

No hay una forma de navegador cruzado para hacer esto fuera del webkit porque solo el webkit tiene actualmente un clip de fondo: texto , y esta extensión de clip de fondo no está en la pista de estándares (que yo sepa). Si quieres relajar tu requisito de CSS3, puedes lograr el mismo efecto en todos los navegadores con Canvas (o SVG), pero solo hablas de navegadores compatibles con HTML5.