Otro efecto, que era muy complicado de lograr, son las sombras.
Gracias a CSS3 y la nueva propiedad box-shadow, podemos agregar este efecto con una sola línea de código.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
box-shadow: rgb(150,150,150) 10px 10px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Debe ser declarada con al menos tres valores.
El primero es el color, que aquí es declarado usando la función rgb() y número decimales, pero también puede expresarse en hexadecimal.
Los siguientes valores expresados en píxeles, indica el desplazamiento de la sombra. El desplazamiento puede ser positivo o negativo. Los valores indica la distancia horizontal y vertical, desde la sombra al elemento.
- Valores positivos crean la sombra a la derecha y debajo del elemento.
- Valores negativos crean la sombra a la izquierda y por encima del elemnto.
La sombra obtenida es sólida, sin un gradiente o transparencia, lo cual no se asemeja a una sobra real. Se puede incluir un cuarto valor para determina la distancia de difuminado, con este efecto la sombra es más real.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
box-shadow: rgb(150,150,150) 10px 10px 20px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
El último valor es una palabra inset. Esta vuelve una sombra externa en interna. Dando un efecto de profundidad a la caja.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
box-shadow: rgb(150,150,150) 10px 10px 20px inset;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Esto es todo de la propiedad box-shadow.
No hay comentarios:
Publicar un comentario