Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
19
9

Text-shadow y texto 3D

Una de las propiedades que nos da CSS3 para decorar el texto, y que lleva bastante tiempo entre nosotros es el text-shadow, que nos permite crear sombras a cualquier texto.
Este atributo nos deja seleccionar el desplazamiento de la sombra, el desenfoque y el color, y haciendo simples trucos podemos crear incluso efectos 3D (más abajo explico como).

Ejemplo de efecto 3d con text-shadow.
Text-shadow.
Text-shadow.
Text-shadow.

Usar text-shadow

Podemos añadir text-shadow a cualquier elemento y todo el texto que contenga tendrá sombra.
Nota: text-shadow se puede usar sin prefijos de navegadores, pero es recomendable usarlos para mejorar la compatibilidad.
Los parámetros que podemos establecer de text-shadow son:

  • Desplazamiento horizontal: es el desplazamiento de la sombra sobre el eje X.
  • Desplazamiento vertical: es el desplazamiento de la sombra sobre el eje Y.
  • Desenfoque: es el nivel de desenfoque de la sombra.
  • Color: podemos establecer el color de la sombra en cualquier notación.
  1. text-shadow: [Desp. eje X] [Desp. eje Y] [Desenfoque] [Color];

Crear resplandor

Podemos crear resplandores en el texto poniendo como sombra colores claros, y hay que tener en cuenta que algunas veces es recomendable usar varias sombras juntas.

Text-shadow.
Text-shadow.
Text-shadow.
  1. <!-- El siguiente elemento es el que tiene más resplandor -->
  2. <div style="text-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09, 0px 0px 30px #F09;">Text-shadow.</div>

Efecto 3D con text-shadow

Para crear este efecto debemos de añadir distintas sombras paralelas del mismo color y una final más oscura.
Para controlar la profundidad del elemento debemos de poner más o menos sombras, y para asegurarnos que sean paralelas (y además contiguas) debemos de establecer el mismo desplazamiento X e Y (por ejemplo: text-shadow: 20px 20px [...])

3D
  1. text-shadow: 1px 1px 0px #333,
  2. 2px 2px 0px #333,
  3. 3px 3px 0px #333,
  4. 4px 4px 0px #333,
  5. 5px 5px 0px #333,
  6. 6px 6px 0px #333,
  7. 7px 7px 0px #333,
  8. 8px 8px 0px #333,
  9. 9px 9px 0px #333,
  10. 11px 11px 10px #000;

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: