selectores - Gradiente de texto del navegador en formato css puro sin usar imagen de fondo

selectores avanzados css

Question

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

Answer 1

Encontré que la mejor manera de hacer esto es usar gradientes SVG, es fácil de hacer y no requiere ninguna imagen, a continuación se muestra un código que crea un gradiente de texto simple con 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 de x e y para crear un degradado horizontal / vertical o diagonal, también puede aplicarle estilos usando una hoja de estilo CSS, todo lo que necesita es una línea de código adicional 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 a Escuelas W3 .

Answer 2

Puedes hacer esto con jQuery plugins.

El complemento de Cufon también puede tenerlo, deberías comprobarlo. También se podría hacer con el complemento de Raphael o SVG y VML, pero es difícil encontrar una solución de navegador de CSS puro.

Solo 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 tienes que usar algún JavaScript.

Answer 3

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