css texto degradado

He tenido un poco de mirar alrededor y no puedo encontrar nada al respecto.css texto degradado

Si tengo un párrafo de texto, ¿hay alguna manera, tal vez con CSS3 para cambiar gradualmente el color del texto a medida que baja a la página? en lugar de la forma en que lo hace el degradado, porque eso solo lo hace en la palabra, no en todo el párrafo del texto.

Por lo tanto, quiero que parte del texto empiece en blanco y luego se desvanezca en negro, ya que llega al final del párrafo.

No estoy seguro de que se pueda hacer ... Tal vez haya un script java que pueda hacerlo.

Gracias.

Fuente

2011-12-05 ragebunny

usted puede hacerlo usando CSS, pero sólo funcionará en los navegadores WebKit (Chrome y Safari): http://jsfiddle.net/joshnh/DphXz/

Fuente

2011-12-05 11:49:08 joshnh

Thats amazing .... Pero es una pena que solo navegadores webkit .... Me pregunto si hay alguna solución para IE y firefox !? gracias por eso. – ragebunny

Esperemos que otros navegadores comiencen a implementar estas características, pero hasta entonces es solo por webkit. – joshnh

La forma más fácil para los gradientes de texto multi-navegador es utilizar una imagen.

http://webdesignerwall.com/tutorials/css-gradient-text-effect

Fuente

2011-12-05 15:01:43

que era capaz de hacer algo similar en css puro, sin embargo, no funciona en IE, ya que no soporta la propiedad de mezcla de modo mixto que css: http://caniuse.com/#feat=css-mixblendmode

El código fragmento está a continuación. Espero que ayude a alguien.

<html> 
<head> 
<style> 
.gradient { 
    position: relative; 
    content: ''; 
    display: block; 
    width: 260px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1))); 
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:   linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
} 
.gradient p { 
    color: #000; 
    background: #fff; 
    mix-blend-mode: lighten; 
} 
</style> 
</head> 
<body> 
    <div class="gradient"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    </div> 
</body> 
</html>

Fuente

2016-02-09 11:14:25

Respuesta

Cuestiones relacionadas