Cruce el degradado del texto del navegador en css puro sin usar la imagen de fondo

Question

He intentado mucho con el gradiente de texto. He encontrado el código para safari y Chrome, pero no es compatible en otros navegadores. Quiero que funcione sin usar la imagen de fondo. Si tiene alguna solución adecuada, amablemente proporcione.

Answer 1

Puede hacerlo con los complementos de jQuery.

El plugin de Cufon puede tenerlo también, debe verificarlo. También podría hacerse con el plugin de Raphael o SVG y VML, pero una solución de navegador cruzado de CSS puro es difícil de encontrar.

Sólo para Chrome y Safari:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); 

Para el resto de los navegadores que tienen que usar algo de JavaScript.

Answer 2

\t <style type="text/css"> 
 
\t \t h1 { 
 
\t \t \t font-family: "Myriad Pro", sans-serif; 
 
\t \t \t font-size: 40px; 
 
\t \t \t font-weight: normal; 
 
\t \t } 
 
\t \t 
 
\t \t /* --- start of magic ;-) --- */ 
 
\t \t .white-gradient { 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .white-gradient:after { 
 
\t \t \t content: ''; 
 
\t \t \t display: block; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t height: 100%; 
 
\t \t \t width: 100%; 
 
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
 
\t \t \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); 
 
\t \t \t background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
 
\t \t \t background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:  -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:  -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:   linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t } 
 
\t \t /* --- end of magic ;-) --- */ 
 
\t </style> 
 
\t 
 
\t <h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>

Answer 3

He encontrado la mejor manera de hacer esto es utilizar gradientes SVG, es fácil de hacer y no requiere ninguna imagen, por debajo de un cierto código que crea un gradiente de texto simple utilizando SVG.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
     <defs> 
 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
 
      <stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" /> 
 
      <stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" /> 
 
     </linearGradient> 
 
     </defs> 
 
     <text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100"> 
 
    SVG Text Gradient</text> 
 
    </svg>

Puede cambiar los valores X e Y para crear un gradiente horizontal/vertical o diagonal, también se puede aplicar estilos a él utilizando una hoja de estilo CSS, todo lo que necesita es una línea adicional de código entre las etiquetas defs.

<link href="style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/> 

Este método funciona en las últimas versiones de Chrome, IE, Firefox y Safari. También puede aplicar degradados radiales, desenfoques y filtros, para obtener más información, vaya al W3 Schools.