Sombra de caja

Parte de la sección Estilos con 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 te permite crear efectos visualmente atractivos que hacen que los elementos parezcan «sobresalir» de la página o crean 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 con respecto al 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 con respecto al 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 mayor crea una sombra más difuminada. Si se omite, el valor predeterminado es 0 (sin desenfoque).

spread (opcional): El radio de expansió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 mediante colores con nombre, 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 cuadro 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 cuadro con un desplazamiento horizontal de 2px, un desplazamiento vertical de 2px, un radio de desenfoque de 5px, un radio de extensió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 utilizar la propiedad box-shadow para añadir efectos de sombra a estos elementos. Sigue los pasos que se indican a continuación:

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

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>