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.
PASO 2
Con el comando Ctrl + S salvamos nuestro documento con el nombre de texto con sombra.html
PASO 3
Vamos a Photoshop y creamos un nuevo documento de 100 x 100 píxeles con un color de relleno gris oscuro (#3c3c3c)
PASO 4
Ahora vamos al menú Filter – Noise – Add Noise y aplicamos los valores que se ven en la imagen.
PASO 5
Guardamos la imagen como un png con el nombre de fondo.
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
PASO 7
Ahora vamos a copiar el siguiente código justo por debajo del estilo body como se ve en la imagen.
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;
}
PASO 8
En nuestro documento escribimos la palabra Tutoriales y en la ventana Properties le aplicamos el formato Heading 1.
PASO 9
Listo ya tenemos nuestro efecto terminado, podemos agregar todos los textos que queramos para que se vea muchísimos mejor.
EXTRA:
Aquí les dejo la explicación del código que hace posible el efecto de la sombra.
Tutorial css
24. Oct, 2010
[...] 1, 2, 3, 4, 5, 6, 7, 8, 9, [...]
Tutoriales de CSS
24. Oct, 2010
[...] 1, 2, 3, 4, 5, 6, 7, 8, 9, [...]
raul
24. Jul, 2011
es increible lo que se puede hacer con CSS3, simple y muy util, gracias!