lunes, 29 de octubre de 2012

Poner sombras y relieves a tu texto web con CSS3

Hola, aquí despues de algún tiempo con una entrada más, en esta ocasión vamos a aprender a ponerle un poco de sombra a nuestro texto editando el archivo css.  Este efecto queda muy en títulos o en texto que usemos como botón.

Primero vamos a aprender como utilizar la propiedad text-shadow.

Esta propiedad lleva 4 parámetros, el primero corresponde a la sombra en x, el segundo a la sombra en y, el tercero es el nivel de desenfoque (blur) y el cuarto y último es el color de nuestra sombra.

modificadores

Aquí en la imagen puedes apreciar que no se le pone sombra en x , solo en y, esto para dar un efecto de relieve al texto, el desenfoque es de 2 pixeles y el color es un gris muy muy obscuro.

El código completo en el css quedaría algo así:

h2 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;

color: #222;

text-shadow: 0px 2px 3px #555;
}
En este ejemplo este efecto se lo voy a aplicar unicamente a los encabezados de nivel 2, lo demás que tengo puesto es lo clásico demas como puedes ver el color que escogí para la letra es un poco más obscuro que el de la sombra, esto porque yo utilizo un fondo gris y de esta forma queda muy bien.

Pues eso es todo por esta entrada y nos leemos luego!!!

Happy web design!!!!

No hay comentarios:

Publicar un comentario