Box Shadow

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 42 de 76.

En CSS, la propiedad box-shadow se utiliza para añadir efectos de sombra al cuadro de un elemento. Esta propiedad le permite crear efectos visualmente atractivos que hacen que los elementos parezcan "sobresalir" de la página o crear profundidad y dimensión.

Aquí tienes la sintaxis básica para usar la propiedad box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: La distancia horizontal de la sombra desde el elemento. Los valores positivos mueven la sombra hacia la derecha, y los valores negativos la mueven hacia la izquierda.

vertical-offset: La distancia vertical de la sombra desde el elemento. Los valores positivos mueven la sombra hacia abajo, y los valores negativos la mueven hacia arriba.

blur (opcional): El radio de desenfoque de la sombra. Un valor más grande crea una sombra más desenfocada. Si se omite, el valor predeterminado es 0 (sin desenfoque).

spread (opcional): El radio de propagación de la sombra. Los valores positivos hacen que la sombra se expanda, y los valores negativos hacen que se contraiga.

color (opcional): El color de la sombra. Se puede especificar utilizando nombres de colores, valores hexadecimales, valores RGB o valores HSL.
inset (opcional): Cambia la sombra de una sombra exterior (outset) a una sombra interior.

Por ejemplo:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

En este ejemplo, todos los elementos <div> tienen una sombra de caja con un desplazamiento horizontal de 5px, un desplazamiento vertical de 5px, un radio de desenfoque de 10px y un color gris. Los elementos con la clase button tienen una sombra de caja con un desplazamiento horizontal de 2px, un desplazamiento vertical de 2px, un radio de desenfoque de 5px, un radio de propagación de 2px y un color negro semitransparente (rgba(0, 0, 0, 0.5)).

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) y un párrafo (<p>). Tu tarea es usar la propiedad box-shadow para añadir efectos de sombra a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div>. Establece el box-shadow a 10px 10px 5px gray.
Escribe una regla CSS que apunte al elemento <p>. Establece el box-shadow a -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Hoja de referencia

La propiedad box-shadow añade efectos de sombra a los elementos:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Distancia horizontal (positivo = derecha, negativo = izquierda)
vertical-offset: Distancia vertical (positivo = abajo, negativo = arriba)
blur (opcional): Radio de desenfoque (mayor = más desenfocado)
spread (opcional): Radio de propagación (positivo = expandir, negativo = contraer)
color (opcional): Color de la sombra
inset (opcional): Crea una sombra interna en lugar de externa

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Pruébalo tú mismo

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>