lunes, 29 de octubre de 2012

Poner fondo degradado a tu sitio web con CSS3

Aquí les dejo como poner un degradado como fondo de tu sitio web, es bastante sencillo con solo una instrucción dentro de la etiqueta body:

background-image: linear-gradient (bottom, rgb(219,55,219) 27%,
rgb(90,84,255) 86%);

 

como puedes ver pide 5 modificadores: el primero es como va a ser el degradado, en este caso al poner bottom el degradado se da de arriba hacia abajo, el segundo es el primer color, yo lo asigné mediante la declaración en rgb, el tercero es el porcentaje de opacidad del primer color, el cuarto es el segundo color y el último es el porcentaje de opacidad del segundo color.

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

Happy web design!!!!

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!!!!