Esercizi Box Shadow CSS

Codegrind Team•Jul 16 2023

Metti in atto l’applicazione di ombre sofisticate agli elementi del tuo sito web per aggiungere effetti visivi accattivanti e profondità. Attraverso queste esercitazioni di CSS, perfeziona le tue competenze nell’utilizzo delle ombre con box-shadow.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per aggiungere un'ombra al paragrafo con box-shadow.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        box-shadow: 5px 5px 5px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha un'ombra.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per aggiungere un'ombra al link quando è in stato "hover".

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        box-shadow: 3px 3px 3px #888888;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
      a:hover {
        box-shadow: 5px 5px 5px #888888;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per aggiungere un'ombra interna al div con box-shadow.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        box-shadow: inset 3px 3px 3px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un'ombra interna.</div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per aggiungere un'ombra a tutti gli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        box-shadow: 2px 2px 2px #888888;
        padding: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un titolo all'interno. Usa il CSS per aggiungere un'ombra al titolo con box-shadow.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        box-shadow: 3px 3px 3px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con un'ombra.</h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per aggiungere un'ombra solo nella parte inferiore del link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        box-shadow: 0px 5px 5px #888888;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Passa il mouse qui</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un div all'interno. Usa il CSS per aggiungere un'ombra con raggio di 15px al div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        box-shadow: 10px 10px 15px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un'ombra con raggio di 15px.</div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una tabella all'interno. Usa il CSS per aggiungere un'ombra a tutte le celle della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      table {
        width: 100%;
      }

      th,
      td {
        box-shadow: 2px 2px 2px #888888;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Intestazione 1</th>
        <th>Intestazione 2</th>
      </tr>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un titolo all'interno. Usa il CSS per aggiungere un'ombra solo nella parte superiore del titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      h1 {
        box-shadow: 0px -5px 5px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con un'ombra nella parte superiore.</h1>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un div all'interno. Usa il CSS per aggiungere un'ombra solo a destra del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      div {
        box-shadow: 5px 0px 5px #888888;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un'ombra solo a destra.</div>
  </body>
</html>