⇪

Sombras múltiples

facebook-svg gplus-svg twitter-svg

Letras con contorno

En SVG podemos fácilmente marcar el contorno de las letras utilizando el atributo stroke. También lo podemos hacer en CSS aplicando cuatro sombras solidas al texto:

text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px -1px 0px black, -1px 1px 0px black;

No hay que olvidar que el desenfoque ( blur ) es opcional y que el valor por defecto es 0. Por lo tanto podemos escribir: 

text-shadow: 1px 1px black, 1px -1px black, -1px -1px black, -1px 1px black;

Veamos un ejemplo:



SOMBRA
#sombrah1 {
  background-color: cornsilk;
  height: 100%;
  text-align: center;
}

#sombrah1 h1 {
  color: white;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 36px;
  text-shadow: 1px 1px black, 1px -1px black, -1px -1px black, -1px 1px black;
}

SOMBRA

Texto tridimensional

También podemos crear la ilusión de texto tridimensional utilizando las sombras múltiples de CSS3:
Observe que para dar relieve utilizamos sombras solidas, donde el desenfoque es 0, y también el desplazamiento vertical es 0. El desplazamiento horizontal crece en un pixel con cada nueva sombra aplicada, y el color de la sombra va de gris claro: rgb(200, 200, 200) a más oscuro:  rgb(190, 190, 190).

  text-shadow: /*relieve*/
    0 1px 0 rgb(200, 200, 200), 
    0 2px 0 rgb(190, 190, 190), 
    0 3px 0 rgb(180, 180, 180),
    0 4px 0 rgb(175, 175, 175),
    0 5px 0 rgb(180, 180, 180),
    0 6px 0 rgb(190, 190, 190),

Para rematar creamos una sombra al estilo tradicional:

    /*sombra*/
    5px  7px  5px rgba(0, 0, 0, .40),
    5px 12px 10px rgba(0, 0, 0, .30),
    5px 17px 20px rgba(0, 0, 0, .20),
    5px 22px 30px rgba(0, 0, 0, .10);

See the Pen texto 3d by Gabi (@enxaneta) on CodePen.

Letras con textura

En Photoshop podemos aplicar texturas al texto. También es posible hacerlo utilizando mascaras de texto. en CSS. La mala noticia es que esto no funciona en todos los navegadores, notablemente en Firefox. Una solución sería utilizar SVG
Otra solución es utilizar sombras múltiples. Veamos cómo:

En HTML el elemento <h1> aparece dentro del <div id="sombra">. En el CSS el texto es blanco color:White, y el div tiene como fondo ( background-image ) una textura realizada con gradientes.

background-image:
  linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%),
  linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%);
background-size: 25px 25px;

Vea más ejemplos de texturas CSS: CSS3 Patterns Gallery

Las letras tienen que ser blancas – esto es muy importante. De esta manera al aplicar  mix-blend-mode: multiply; las letras se fusionan perfectamente con el fondo. Todo lo que queda por hacer es aplicar tantas sombras como para tapar el resto del elemento. Esto lo hacemos utilizando JavaScript. Y ya está. Hay que decir que mix-blend-mode no es soportado por IE, y en este caso las letras se quedan blancas sobre un fondo negro.

See the Pen SVG Displacement Map by Gabi (@enxaneta) on CodePen.