Ombra del box

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 42 di 76.

In CSS, la proprietà box-shadow viene usata per aggiungere effetti ombra al riquadro di un elemento. Questa proprietà ti consente di creare effetti visivamente accattivanti che fanno sembrare gli elementi come se "risaltassero" dalla pagina o creano profondità e dimensione.

Ecco la sintassi di base per usare la proprietà box-shadow:

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

horizontal-offset: La distanza orizzontale dell'ombra dall'elemento. I valori positivi spostano l'ombra verso destra, mentre quelli negativi la spostano verso sinistra.

vertical-offset: La distanza verticale dell'ombra dall'elemento. I valori positivi spostano l'ombra verso il basso, mentre quelli negativi la spostano verso l'alto.

blur (facoltativo): il raggio di sfocatura dell’ombra. Un valore più grande crea un’ombra più sfocata. Se omesso, il valore predefinito è 0 (nessuna sfocatura).

spread (facoltativo): il raggio di espansione dell’ombra. I valori positivi fanno espandere l’ombra, mentre quelli negativi la fanno restringere.

color (facoltativo): il colore dell’ombra. Può essere specificato usando nomi di colori, valori esadecimali, valori RGB o valori HSL.
inset (facoltativo): trasforma l’ombra da esterna (outset) a interna.

Ad esempio:

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

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

In questo esempio, tutti gli elementi <div> hanno un'ombra della casella con uno spostamento orizzontale di 5px, uno spostamento verticale di 5px, un raggio di sfocatura di 10px e un colore grigio. Gli elementi con la classe button hanno un'ombra della casella con uno spostamento orizzontale di 2px, uno spostamento verticale di 2px, un raggio di sfocatura di 5px, un raggio di espansione di 2px e un colore nero semitrasparente (rgba(0, 0, 0, 0.5)).

Sfida

Facile

Ti viene fornito un documento HTML con un elemento divisione (<div>) e un paragrafo (<p>). Il tuo compito è usare la proprietà box-shadow per aggiungere effetti ombra a questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div>. Imposta box-shadow su 10px 10px 5px gray.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta box-shadow su -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Provalo tu

<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>