Texto realista (3D) con CSS | Oloblogger Para convertir un texto normal en un rótulo 3D no necesitamos ningún editor de imágenes. Nos basta c...

28 de febrero de 2012

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
Copy URL

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

follow us in feedly

9 comentarios :

  1. Exelente entrada Oloman muy bien explicado todo como solo tu lo haces.así se hace mas facíl de implementar.saludos

    ResponderEliminar
  2. Yo, ya lo he hecho. Gracias "maestro".

    ResponderEliminar
  3. Lo mejor espero implementarlo de alguna forma :D

    ResponderEliminar
  4. me gusta pero voy intetar que fondo de abasjo cambie de color si no oparece una imagen

    ResponderEliminar
    Respuestas
    1. La idea es esa, que por su calidad parezca una imagen. Creo que el cambio de fondo no va a variar eso, pero en fin...

      Eliminar
  5. Buenas tardes Oloman cómo podría implementarlo en el titulo de mi Blog... te agradezco (el blog que estoy trabajando es este: pruebaspha.blogspot.com, pero te agradecería una explicación general, es decir que aplique para cualquier blog, si es posible)

    ResponderEliminar
    Respuestas
    1. Otra cosilla, como podría personalizar los comentarios (es decir las cajitas estas donde aparecen los comentarios) te agradezco..

      Eliminar
    2. Si te refieres a dfhoto (el otro no lleva título), tendrías que añadir todo el CSS que aquí se indica en la plantilla y luego buscar (con artilugios expandidos) <h1 class="title" etc. Dentro del class añades textoddd así:

      <h1 class="title textoddd"...

      Y para personalizar los comentarios hay muchas maneras (tantas como personas), pero esto es lo que te servirá de guía: Comentarios anidados. Lista de clases

      Eliminar