Efecto tipográfico 3D con text-shadow

Square

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, click here to learn more. En el caso del eje Y, valor negativo es hacia arriba, el positivo hacia abajo http://www.bestpokerarticles.com/.

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, para obtener más información, consulte https://www.businesspartnermagazine.com.

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

Comment

2 Replies to “Efecto tipográfico 3D con text-shadow”

  1. Muy bueno! con esto te ahorrás varias cosas con Photoshop y queda fácil de actualizar. Se puede mezclar con lo que vimos en clase de las tipografías especiales? Porque de ser así, las muestras de los logos para una web se podrían hacer solamente con CSS.
    Buenísimo truco Rich.

    1. Gracias Juancho. Sí se puede combinar con las tipos especiales que uses con @font-face. Sólo que habría que testearlas para ver que sus formas o trazados sean óptimas para el juego con las sombras. Por ahí algunas con trazos finos o muy caligráficos puedan generarte complicaciones.
      Respecto a los logos, es verdad, se actualizarían más rápidos, pero por mi parte prefiero que sea una imagen antes de correr el riesgo que algún navegador obsoleto o que no soporte @font-face arruine nada mas y nada menos que el signo más representativo de una identidad.
      Qué aproveches!

¿Ideas? Súmate al debate

This site uses Akismet to reduce spam. Learn how your comment data is processed.