Texto realista (3D) con CSS

Para convertir un texto normal en un rótulo 3D no necesitamos ningún editor de imágenes. Nos basta con una propiedad CSS: text-shadow. El resultado será algo como la imagen que ilustra esta entrada que por cierto, es la única que encontraréis. Lo siguiente que iréis viendo es todo texto plano. Como comprobación podéis intentar seleccionarlo.

Esto es algo que he visto en DesignsHack al hilo de otro tema cuyo fin era distinto. Pero cómo me ha parecido una buena explicación, vamos a hacer lo mismo y en lugar de poner directamente el código y el resultado, cosa que por otra parte me sería más fácil, lo vamos a ver poco a poco para que se entienda y podáis hacer posteriormente las variaciones que gustéis.


Lo primero es asignar al texto que se quiere transformar una clase. La que queramos inventar:

<div class="textoddd">Texto 3D</div>

Luego nos vamos a nuestra hoja de estilo y creamos esa misma clase, asignándole las propiedades relativas a la fuente: grosor, tamaño, altura de línea y tipografía. También le añadimos un text-transform para que todo sea mayúsculas aunque nosotros tecleemos minúsculas:

.textoddd {
  font: bold 80px/1 arial;
  text-transform: uppercase;
}

Este es nuestro primer resultado:

Texto 3D

Nada del otro mundo, así que le damos el primer toque que consiste en añadir al texto un color y una sombra. A esta última le daremos un tono más oscuro y la desplazaremos en vertical 12px.

En el siguiente enlace hay una muy buena herramienta para escoger un color y toda su gama de tonos. No la perdáis de vista porque luego nos vendrá muy bien: 0to255. Nosotros hemos bajado nueve tonos, desde #c69c1e hasta #41330a (45-15%).

La sintaxis de text-shadow es

text-shadow: desplaz_horizontal desplaz_vertical desenfoque color;

.textoddd {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0 12px 0 #41330a;
}

Texto 3D

Ya veis que el texto original simula levantarse y proyectar una sombra, pero esto no queda demasiado realista que digamos, así que vamos a solucionarlo. Lo que haremos será sustituir esa sombra a 12px por seis distintas cada 2px, de manera que al apilarlas simularán ser un cuerpo sólido. Para añadir más de una sombra sólo necesitamos separarlas con comas, sin olvidar que al final siempre irá un punto y coma:

.textoddd {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0  2px 0 #41330a,
               0  4px 0 #41330a,
               0  6px 0 #41330a,
               0  8px 0 #41330a,
               0 10px 0 #41330a,
               0 12px 0 #41330a;
}

Texto 3D

Bastante mejor ¿no? Pues ahora echamos mano de ese servicio de colores que mencioné antes (0to255) y convertimos esa monocromática capa oscura en un degradado. Para eso seleccionamos 5 tonos más a partir del que teníamos oscuro y yendo hacia el más claro (hacia arriba).

Luego los vamos situando en el código anterior, de manera que el más claro será el que quede más cercano a las letras (2px). Recordamos que anteriormente saltamos 9 tonos y esto fue para que entre el color de la letra y el más claro de los que escogimos ahora, haya un cambio significativo de color.

.textoddd {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0  2px 0 #8b6e15,
               0  4px 0 #7c6213,
               0  6px 0 #6e5611, 
               0  8px 0 #5f4b0e, 
               0 10px 0 #503f0c,
               0 12px 0 #41330a;
}

Texto 3D

El cambio no parece muy importante, pero si comparáis con el anterior resultado ya se aprecia una diferencia que hace el texto bastante más majo.


Ya sólo nos queda el toque final, que consistirá en añadir una sombra al uso -con desenfoque- de manera que las letras terminen de aparentar altura y perspectiva de tres dimensiones.

Bueno, en este ejemplo añadiremos realmente dos. Una más grande con un blur (desenfoque) de 15px y un color negro (0,0,0) al 10% de opacidad (último parámetro de rgba) y otra más pequeña de 5px pero más oscura (30%).

.textoddd {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0  2px  0   #8b6e15,
               0  4px  0   #7c6213,
               0  6px  0   #6e5611, 
               0  8px  0   #5f4b0e, 
               0 10px  0   #503f0c,
               0 12px  0   #41330a,
              3px 8px 15px rgba(0,0,0,0.1),
              3px 8px  5px rgba(0,0,0,0.3);
}

Texto 3D

Como es habitual, esta propiedad funciona en prácticamente todos los navegadores a excepción de Internet Explorer, cosa que siempre me da mucho...

CORAJE

CORAJE

CORAJE

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter