miércoles, 22 de enero de 2014

Efectos de texto con HTML y CSS3: Texto en 3D

Voy a iniciar una serie de mini tutoriales donde en cada uno explicaré como por medio del uso de HTML y de CSS3 pondremos un efecto de texto, sencillo pero vistoso para poder usarlo en nuestros sitios web.

Como siempre el código estará explicado como comentarios dentro del código y al ser como dije anteriormente ejemplos bastante simples no creo que necesiten explicación adicional, sin embargo, como siempre cualquier duda y/o comentario pueden hacerlo por este medio.

En esta primera entrada haremos un efecto de 3D super sencillo a nuestro texto solo usando la propiedad de sombra de texto y aplicando dos capas con distintas variaciones de sombra.



Sin más vamos por el código:

1.- Primero crearemos el archivo HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Texto en 3d</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<h1>Este es un texto en 3D</h1> <!--en h1 para que se le aplique el efecto-->
</body>
</html>


2.- Ahora creamos el archivo CSS, cabe destacar que para estos ejemplos ambos archivos (html y css) están en la misma carpeta, pero ustedes saben que en la práctica la estructura del sitio recomienda hacerlo en carpetas.


body{
background: black; /*fondo obscuro para observar mejor el efecto*/
}

h1{
text-shadow: 0 1px 0 #bbb,
                   0 2px 0 #bbb,
                   0 3px 0 #aaa,
                   0 4px 0 #aaa,
                   0 5px 0 #999,
                   0 6px 1px #000,
                   0 0px 3px #000,
                   0 1px 3px #000,
                   0 3px 5px #000,
                  0 5px 10px #000,
                   0 5px 20px #000; /*Ponemos varia sombras cada una alargándola o acortándola por secciones, cada linea es una capa*/

} /*se lo aplico a un encabezado pero se le puede aplicar a 
cualquier etiqueta de texto o crear una clase o id*/


Bueno esto es todo por ahora y nos leemos luego!!!!

No hay comentarios:

Publicar un comentario