Crear efecto sombra en una pagina web

Hola, como lo habia prometido hace tiempo en este blog, voy a crear trucos y cosas para diseñar tu pagina web con un buen diseño.

En este tutorial vamos a colocar un efecto sombra a la pagina web.

bien nuestro primer paso es tener un editor de imagenes donde podamos creear el efecto de la sombra, recomiendo Photoshop o Fireworks, para este ejemplo voy a utilizar fireworks.

1. Creamos el efecto sombra

creamos en fireworks un imagen de 800x40 px, colocamos el color de fondo donde se verá reflejada la sombra de la pagina ( en este caso he elegido un azul #006CD9).

Queda algo asi

aplicamos un rectangulo de 778x50 px, con el color de nuestra pagina(en este caso blanco #ffffff) y lo centramos en nuestra imagen (Posicion x= 11 y= -5).

Aplicamos un filtro de iluminación (Color negro, opacidad 65%, suabidad 14)

la guardamos como bg.jpg

2. Creamos el HTML para poner nuestro fondo

en cualquier editor de html lo puedes hacer, primero creas el documento html y en la etiqueta del boby escribe la siguiente propiedad:

Clic en la image para agrandar

ahora debe crear una tabla centrada dentro del body, que es donde vamos a terner el contenido de nuestra pagina.


y listo,
eso es todo!!!!

El estilo en el
body hace que nuestro fondo quede de forma
centrada y no se repida de en
cascada como es común en los fondos de las
paginas.

Bien este hacido
un truco sencillo espero que lo difruten.
saludos


Iván.