Estoy tratando de lograr un degradado + texto efecto de sombra en Chrome/Safari utilizando CSS text-shadow y una combinación de text-shadow y background-image: -webkit-gradient, vea el ejemplo blw. Sólo puedo hacer que uno de los efectos de aplicar(si puedo agregar la sombra del gradiente desaparece. ¿Qué estoy haciendo mal?

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

OriginalEl autor mac | 2010-09-27

3 Comentarios

  1. 16

    El gradiente «desaparece» porque el text-shadow está en un nivel por encima del fondo.

    1. El texto (que es transparente)
    2. La sombra
    3. El fondo.

    Podemos evitar este copiando el texto y ponerlo debajo de la capa original, a continuación, aplicar la sombra de ahí, por ejemplo:

      h1 {
        position: relative;
        font-size: 100px;
        text-align: center;
      }
    
      h1 div {
        background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute; 
        width: 100%;
    }
      h1:after {
        text-shadow: 10px 10px 11px #fff;
        color: transparent;
      }
    
      #hello:after {
            content: 'Hello World';
      }
      <h1 id="hello"><div>Hello World</div></h1>
    Gracias. ¿Cómo puedo aplicar text-align para esto? No puedo conseguir el gradiente de seguir adelante?
    Ver la actualización.

    OriginalEl autor kennytm

  2. 3

    Esta respuesta es similar a la respuesta por @KennyTM arriba, excepto que su respuesta tiene la sombra rígida en el CSS, que no es adecuado para texto dinámico como en un CMS. Además, su método requiere un ID distinto para cada instancia, lo que sería muy tedioso si usted planea usar este efecto mucho. El ejemplo siguiente utiliza una clase en su lugar, y permite que el texto dinámico.

    Intente esto:

    h1 {
        position: relative;
        font-size: 100px;
        text-align: center;
    }
    
    h1 div {
        background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute; 
        width: 100%;
    }
    h1:after {
        text-shadow: 2px 2px 2px #000000;
        color: transparent;
    }
    
    .gradient-shadow:after {
        content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
    }

    Y, a continuación, en su HTML:

    <h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>

    Sólo asegúrese de que el texto en el <div> coincide con el texto en el title atributo.

    Con algunos de formato adicionales (yo usé Helvetica Neue ultra ligero y un fondo oscuro), se puede conseguir un efecto algo como esto: http://cl.ly/image/2C0k0I3W271D

    OriginalEl autor Michael

  3. 0

    Sin más marcado HTML o pseudo elementos se puede lograr este efecto mediante el filtro de la propiedad y de la gota de sombra de la función. Este método también funciona con una imagen de fondo vs gradiente.

    h1 {
      font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#484848));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-filter: drop-shadow(2px 2px #333);
              filter: drop-shadow(2px 2px #333);
    }

    Violín: https://jsfiddle.net/eywda89g/

    OriginalEl autor Ken

Dejar respuesta

Please enter your comment!
Please enter your name here