Tutoriales en la Web

Efecto de sombra en una tipografia con CSS

Posteado el 26. May, 2010 por Webi in CSS, Desarrollo Web, HTML y CSS, Recursos

Para los que les guste el videotutorial también les dejamos la explicación en video

PASO 1

Creamos un nuevo documento en Dreamweaver HTML.

Efecto de sombra en una tipografia con CSS

PASO 2

Con el comando Ctrl + S salvamos nuestro documento con el nombre de texto con sombra.html

Efecto de sombra en una tipografia con CSS

PASO 3

Vamos a Photoshop y creamos un nuevo documento de 100 x 100 píxeles con un color de relleno gris oscuro (#3c3c3c)

Efecto de sombra en una tipografia con CSS

PASO 4

Ahora vamos al menú Filter – Noise – Add Noise y aplicamos los valores que se ven en la imagen.

Efecto de sombra en una tipografia con CSS

PASO 5

Guardamos la imagen como un png con el nombre de fondo.

Efecto de sombra en una tipografia con CSS

PASO 6

Regresamos a Dreamweaver y vamos al menú Modify – Page Properties y en la opción Background color colocamos un color gris oscuro y en la opción Background image escribimos fondo.png

Efecto de sombra en una tipografia con CSS

PASO 7

Ahora vamos a copiar el siguiente código justo por debajo del estilo body como se ve en la imagen.

Code block

h1 {
 
display: block; text-decoration: none;
 
font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
 
text-align: center;
 
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
 
}

Efecto de sombra en una tipografia con CSS

PASO 8

En nuestro documento escribimos la palabra Tutoriales y en la ventana Properties le aplicamos el formato Heading 1.

Efecto de sombra en una tipografia con CSS

PASO 9

Listo ya tenemos nuestro efecto terminado, podemos agregar todos los textos que queramos para que se vea muchísimos mejor.

Efecto de sombra en una tipografia con CSS

EXTRA:

Aquí les dejo la explicación del código que hace posible el efecto de la sombra.

Efecto de sombra en una tipografia con CSS

Articulos relacionados:

Tags: CSS, Tipografia, video