Crear fácilmente texto 3D con CSS3 by @html5facil

Fuente: html5facil.com

Aun que CSS3 no tiene una propiedad directamente para hacer esto, hay desarrolladores que utilizan el ingenio para combinarlas y crear cosas sorprendentes de las cuales aprenderán en este momento a Crear fácilmente texto 3D con CSS3 y que sea aplicable a sus proyectos.

Crear fácilmente texto 3D con CSS3

¿Dónde lo puedo aplicar?

La propiedad se llama text-shadow y obviamente es aplicable a todo tipo de etiqueta que contenga texto, títulos, párrafos,  etc.

Nota: También es aplicable a fuentes personalizadas (@font-face).

 

CSS3 soporta capas

Una de las ventajas de CSS3 son las capas, por ejemplo, en la propiedad backgroundpuedo decirle que primero aplique un fondo de color rojo y después coloque sobre el fondo una imagen png, en el caso de text-shadow serian capas de sombra.

Nota: Entre mas capas tenga, mayor grosor tendrá el texto.

Ejemplo:

1
2
3
h1 {
  text-shadow: parametros_capa_1, parametros_capa_2, parametros_capa_n;
}

 

Sintaxis básica de text-shadow

Parámetros :

  1. Desplazamiento de la sombra sobre el eje X en relación al texto, Valores positivos o negativos.
  2. Desplazamiento de la sombra sobre el eje Y en relación al texto, Valores positivos o negativos.
  3. Cantidad de efecto blur o desenfoque de la sombra.
  4. Color de la sombra en hexadecimal o RGB.

 

Ahora si, efecto 3D en el texto

Aplicando todo lo que se explico anteriormente podemos empezar a jugar con los valores y obtener diferentes resultados ajustando al gusto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
  color:#FFF;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Nota: Recuerden anteponer las extensiones propietarias de CSS3-webkit-, -moz-, -o-, -ms- (Microsoft).

Y claro, dejamos el link de descarga del ejemplo aqui y el ejemplo en demostración aqui.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s