Efecto tipográfico 3D con text-shadow

Hace unos días, decidí por fin hacerle una carátula al sitio web de un amigo. Alejandro Glot es diseñador de imagen y sonido, especializado en edición y post-producción. Pero su gran inquietud por el modelado 3D y la animación digital es algo que lo mantiene en constante proceso de aprendizaje y perfeccionamiento.

Tiene desde hace un tiempo, reservado un dominio, y un espacio de hosting al que usa pura y exclusivamente para compartir material de sus proyectos, pero de manera privada vía FTP. Por esta razón nunca ha necesitado (o destinado tiempo para) desarrollar su sitio web. Sin embargo, me pareció propicio ejercitar un poco (apenas un poco) con la propiedad text-shadow de CSS.

Propiedad text-shadow

La sintaxis para agregarle sombra a una etiqueta de texto es la siguiente:

.selector {
 text-shadow: x-offset y-offset blur color;
}

x-offset, y-offset

El valor x-offset es el corrimiento horizontal de la sombra e y-offset el vertical, expresados en pixeles. Vale aclarar en este caso que estos valores también pueden ser negativos, donde por ejemplo el valor -10px en el eje X hará que la sombra se muestre del lado izquierdo, mientras que su positivo lo hace en el derecho. En el caso del eje Y, valor negativo es hacia arriba, el positivo hacia abajo.

Blur

Este valor, también expresado en pixeles es el equivalente a la dureza en la definición del sombreado siendo 0 el valor de una sombra sólida y cualquier número positivo (aquí no hay negativos) la manera en que se “ablanda” la sombra de nuestro texto.

Color

En este caso, es el simple valor del color de nuestra sombra, la que debería aplicarse en el sistema rgba (más adelante escribiré un artículo sobre esta razón). Sin embargo para nuestro experimento, nos bastan los colores hexadecimales que habitualmente usamos.

Múltiples text-shadow

Ok, acá viene el truco. La propiedad text-shadow puede ser aplicada varias veces a un mismo elemento. La sintaxis sería:

.selector {
  text-shadow: x-offset y-offset blur color, /*primera sombra*/
               x-offset-2 y-offset-2 blur-2 color-2, /*segunda sombra*/
               x-offset-3 y-offset-3 blur-3 color-3; /*tercera sombra*/
}

Simplemente resta tomar los colores de las sombras y jugar un poco con ajustes ópticos para dar el efecto.

El resultado

Primero, el HTML: En este caso utilicé una simple etiqueta h1

<h1>Alejandro Glot</h1>

Segundo, el  CSS: un poco de color para el texto, luego múltiples sombras para recrear el efecto de volumen e iluminación:

h1 {
  font-size: 80px;
  margin-bottom: 30px;
  color: #e1e1e1;
  text-shadow: 0 1px 1px #BBB,
               0 2px 0 #999,
               0 3px 0 #888, 
               0 4px 0 #777, 
               0 5px 0 #666, 
               0 6px 0 #555, 
               0 7px 0 #444, 
               0 8px 0 #333, 
               0 9px 7px #302010, 
               0 14px 21px #222;
}

Veamos lo aplicado:

Screenshot de AlejandroGlot.com.ar