En CSS se utiliza la propiedad box-shadow para aplicar sombras sobre los objetos contenedores. Está propiedad aparece a partir de la versión 3 y se encuentra totalmente soportada por los navegadores conocidos, por lo que ya no es necesario utilizar prefijos en nuestro código.
Cómo funciona box-shadow
Según mozilla developer “La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas”. Su compatibilidad con navegadores es bastante buena, por lo que podemos tener la tranquilidad de que no va a suceder nada fuera de o común al utilizarla.
Los valores que utiliza box-shadow son los siguientes:
- h-offset: representa el movimiento horizontal o eje X (obligatorio)
- v-offset: representa el movimiento vertical o eje Y (obligatorio)
- blur: Representa el radio de desenfoque de la sombra (opcional)
- spread: Es el tamaño de la sombra (opcional)
- color: Es el color para la sombra, si no se especifica se usa el color actual de texto (opcional)
- inset / outset: La sombra es interna – inset – o externa – outset – siendo este último el valor por defecto (opcional)
Preparativos para colocar sombras con CSS
En un documento HTML sencillo, colocamos 5 etiquetas div que usaremos como contenedores. Todas comparten el mismo nombre de clase, pero con un id diferente cada una.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Sombras en CSS</title>
</head>
<body>
<div id="sombra1" class="cuadrado"></div>
<div id="sombra2" class="cuadrado"></div>
<div id="sombra3" class="cuadrado"></div>
<div id="sombra4" class="cuadrado"></div>
<div id="sombra5" class="cuadrado"></div>
</body>
</html>
Colocamos una etiqueta link que apunte a nuestro archivo CSS.
<link rel="stylesheet" href="sombras.css">
Así ha quedado nuestro archivo HTML.
En el archivo CSS, haremos que por medio de la clase, los contenedores sean de 100 x 100 píxeles, estén separados por un margen de 50 píxeles, flotando a la izquierda y con un color de fondo suave.
.cuadrado{
width: 100px;
height: 100px;
margin: 50px;
float: left;
background-color: #CCAABB;
}
Visualizando el documento en nuestro navegador, debe quedar así.
Usando box-shadow para colocar sombras
Vamos a crear sombras diferentes para cada contenedor, modificando los atributos de la propiedad box-shadow.
Definimos #sombra1 con 5 píxeles en X y en Y.
#sombra1{ box-shadow: 5px 5px; }
Y así es como se ve:
Ahora, definamos #sombra2 con 0 píxeles en X y en Y, le ponemos también un desenfoque de 10 píxeles.
#sombra2{ box-shadow: 0 0 10px; }
Y este es el resultado.
A continuación, definimos #sombra3 sin valores en X, Y, sin desenfoque, pero con un tamaño de 5 píxeles.
#sombra3{ box-shadow: 0 0 0 5px; }
Podemos ver el resultado ahora.
Ahora, definimos #sombra4 con sus valores X, Y en negativo, con 3 píxeles de desenfoque y tamaño. Adicionalmente le cambiamos el color a la sombra por un verde.
#sombra4{ box-shadow: -25px -25px 3px 3px #0A1; }
Y por supuesto, el resultado se nota.
Finalmente, hacemos que #sombra5 tengo 0 en sus valores X, Y, 3 píxeles de desenfoque y tamaño. Luego la pintamos de un color más fuerte y con el atributo inset, hacemos que se refleje al interior.
#sombra5{ box-shadow: 0 0 3px 3px #4B0082 inset; }
Y el resultado final es el siguiente:
Todo el código CSS utilizado:
.cuadrado{
width: 100px;
height: 100px;
margin: 50px;
float: left;
background-color: #CCAABB;
}
#sombra1{ box-shadow: 5px 5px; }
#sombra2{ box-shadow: 0 0 10px; }
#sombra3{ box-shadow: 0 0 0 5px; }
#sombra4{ box-shadow: -25px -25px 3px 3px #0A1; }
#sombra5{ box-shadow: 0 0 3px 3px #4B0082 inset; }
Si quieres probar y jugar un poco con el código, chécalo en JSFiddle.
Comentarios, dudas y preguntas
¡Y eso es todo! No olvides dejar tus comentarios, dudas y / o preguntas. Con gusto las respondemos.
Docente, blogger, developer. Editor & Copy
Sobre: #Blogging, #Excel, #VBA, #Android, #PHP, #JavaScript, #Java, #WordPress, #IoT, #Python
