Existe un quinto parámetro opcional para box-shadow en CSS3 y éste sirve para darle un tamaño a dicha sombra que estamos invocando.
ver ejemplo
Por ejemplo normalmente usamos box-shadow asi:
Código :
box-shadow: 10px 10px 20px black; /* que significa box-shadow: "X" "Y" "difuminado" "color"; */
Ahora lo que planteo en este tutorial es usar un párametro adicional que rige el tamaño de dicha sombra, ya que en su defecto es del mismo tamaño de la caja asociada.
El código quedaría así:
Código :
box-shadow:10px 10px 20px -10px black; /* que significa box-shadow: "X" "Y" "difuminado" "tamaño de la sombra" "color"; */
Hay que tener en cuenta que si ponemos por parámetro en el tamaño de la sombra " 0 " no estamos poniendo un tamaño nulo, sino que sólo estamos usando el tamaño de la caja asociada, es decir que si yo tengo una caja de 100px x 100px y nosotros ingresamos 0 en el tamaño de la sombra esta sería también de 100px x 100px.
Si queremos modificar estos valores tendremos que ingresar valores positivos o negativos según sea la necesidad. Ahora para que todo quede mas claro hagamos un ejemplo.
codigo HTML5
Código :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Circulo cromatico con multiples sombras en css3</title> <link rel="stylesheet" href="paramsombras.css"/> <script src="prefixfree.js"></script> </head> <body> <!-- ejemplo 1 --> <section id="caja"></section> <!-- ejemplo 2 --> <section id="blog"> <h1> Ejemplo 2!</h1> <section id="articulo"> <article id="entrada"> <h2>Entrada del blog bla bla bla</h2> </article> <section id="comentarios"> <article class="comentario"> <p>comentario1</p> </article> <article class="comentario"> <p>comentario2</p> </article> <article class="comentario"> <p>comentario3</p> </article> </section> </section> </section> </body> </html>
Código CSS3
Código :
/********** ejemplo 1*************/
#caja{
background:white;
border:1px solid red;
border-radius:50%;
box-shadow:500px 200px 20px 50px red,
220px 200px 20px 10px orange,
0px 200px 20px 0 yellow,
-300px 200px 20px -50px green,
-500px 200px 20px -90px blue;
height:200px;
margin: 100px auto;
width:200px;
transition: 1s box-shadow;
}
#caja:hover{
box-shadow:0 0 20px 50px red,
0 0 20px 10px orange,
0 0 20px 0 yellow,
0 0 20px -50px green,
0 0 20px -90px blue;
}
/****************** ejemplo 2**************/
article,section{
color:black;
display:block;
font-family:arial;
margin:0 auto;
width:99%;}
#blog{
background:#91C22A;
border:2px solid #582126;
border-radius:30px;
margin-top:250px;
width:50%;}
#blog #articulo #entrada{
background:#497915;
height:100px;
}
#blog #articulo .comentario{
background:#FCFF6E;
border-radius:20px;
box-shadow:0 20px 20px -20px #582126;
height:50px;
margin:20px auto;
padding:20px;
width:80%}
En el ejemplo 1 usamos sombras múltiples y a esas les damos un tamaño diferente para ver todo el poder de esto y ver cómo estas nacen de un solo objeto. Hagan hover en el círculo superior de borde rojo.
En el ejemplo 2 vemos una forma fancy de usarlas en nuestros proyectos. Usamos el tamaño de sombras para darle sutilmente una sombra en la parte inferior de cada comentario del "blog", dándole una profundidad a mi parecer muy bonita.
Un tercer ejemplo ya implementado está en los comentarios de l4c
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por DarkM3nd3z el 17 de Enero de 2012
Por Carlos Muñoz el 04 de Febrero de 2013