6.1 Propiedad box-shadow
La propiedad box-shadow en CSS se utiliza para añadir sombras a los elementos. Esta propiedad permite crear una variedad de efectos visuales, mejorando la apariencia de las páginas web. Vamos a ver en detalle la sintaxis, los valores y ejemplos de uso de box-shadow.
Sintaxis de box-shadow
La propiedad box-shadow acepta uno o más valores, cada uno de los cuales define los parámetros de la sombra. La sintaxis general es la siguiente:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Valores:
offset-x: desplazamiento horizontal de la sombra. Los valores positivos desplazan la sombra a la derecha, los negativos a la izquierdaoffset-y: desplazamiento vertical de la sombra. Los valores positivos desplazan la sombra hacia abajo, los negativos hacia arribablur-radius: radio de desenfoque de la sombra. Cuanto mayor sea el valor, más difusa será la sombra. El valor por defecto es 0 (sombra sin desenfoque)spread-radius: radio de expansión de la sombra. Los valores positivos aumentan el tamaño de la sombra, los negativos lo disminuyen. El valor por defecto es 0color: color de la sombra. Se admiten todos los formatos de color CSS
6.2 Ejemplos de uso
Sombra básica:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Sombra básica</div>
</body>
Sombra con desenfoque:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Sombra con desenfoque</div>
</body>
Sombra con expansión:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Sombra con expansión</div>
</body>
Sombra interna:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Sombra interna</div>
</body>
6.3 Configuración de box-shadow
Detalles de la configuración de box-shadow:
Desplazamiento de la sombra (offset-x y offset-y)
- Valores positivos: la sombra se desplaza a la derecha (
offset-x) y hacia abajo (offset-y) - Valores negativos: la sombra se desplaza a la izquierda (
offset-x) y hacia arriba (offset-y)
Desenfoque de la sombra (blur-radius)
- Valor 0: la sombra será nítida, sin desenfoque
- Valores positivos: cuanto mayor sea el valor, más difusa será la sombra
Expansión de la sombra (spread-radius)
- Valores positivos: la sombra aumenta de tamaño
- Valores negativos: la sombra disminuye de tamaño
Color de la sombra (color)
El color puede especificarse en varios formatos: nombre del color, código hexadecimal, RGB, RGBA, HSL, HSLA.
Sombra interna (inset)
La palabra clave inset crea una sombra dentro del elemento, lo que puede utilizarse para crear un efecto ahuecado.
Varias sombras con diferentes parámetros:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Varias sombras</div>
</body>
GO TO FULL VERSION