Home esercizi css trasparenza

Esercizi Opacity CSS

Aggiungi eleganza al tuo sito web con l’utilizzo della trasparenza in CSS. Pratica l’applicazione della trasparenza agli elementi HTML per ottenere effetti visivi sofisticati e raffinati.

Esercizio 1

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare l'opacità del div al 50%, rendendolo semi-trasparente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un'opacità del 50%.</div>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare l'opacità degli elementi di lista al 70%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      li {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un'immagine all'interno di un div. Usa il CSS per impostare l'opacità dell'immagine al 80%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      img {
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="url_dell_immagine.jpg" alt="Immagine" />
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con due div all'interno. Usa il CSS per impostare l'opacità del primo div al 60% e del secondo div al 30%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      #div1 {
        opacity: 0.6;
        background-color: lightblue;
        width: 200px;
        height: 100px;
      }

      #div2 {
        opacity: 0.3;
        background-color: lightgreen;
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="div1">Questo div ha un'opacità del 60%.</div>
    <div id="div2">Questo div ha un'opacità del 30%.</div>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per impostare l'opacità del link al 40%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      a {
        opacity: 0.4;
      }
    </style>
  </head>
  <body>
    <p>Questo è un <a href="#">link</a> con un'opacità del 40%.</p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare l'opacità del div al 90% quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      div {
        opacity: 1;
        transition: opacity 0.3s;
      }

      div:hover {
        opacity: 0.9;
        background-color: lightblue;
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>Passa il mouse sopra di me per vedere l'effetto.</div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per impostare l'opacità degli elementi di lista al 80% quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      li {
        opacity: 1;
        transition: opacity 0.3s;
      }

      li:hover {
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un'immagine all'interno di un div. Usa il CSS per impostare l'opacità dell'immagine al 70% quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      img {
        opacity: 1;
        transition: opacity 0.3s;
      }

      img:hover {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="url_dell_immagine.jpg" alt="Immagine" />
    </div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per impostare l'opacità del link al 50% quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      a {
        opacity: 1;
        transition: opacity 0.3s;
      }

      a:hover {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> con un'opacità del 50% quando il mouse ci
      passa sopra.
    </p>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con tre div all'interno. Usa il CSS per impostare l'opacità del primo div al 60% quando il mouse ci passa sopra, del secondo div al 40% e del terzo div al 20%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      #div1 {
        opacity: 1;
        transition: opacity 0.3s;
      }

      #div1:hover {
        opacity: 0.6;
        background-color: lightblue;
        width: 200px;
        height: 100px;
      }

      #div2 {
        opacity: 1;
        transition: opacity 0.3s;
      }

      #div2:hover {
        opacity: 0.4;
        background-color: lightgreen;
        width: 200px;
        height: 100px;
      }

      #div3 {
        opacity: 1;
        transition: opacity 0.3s;
      }

      #div3:hover {
        opacity: 0.2;
        background-color: lightpink;
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      Questo div ha un'opacità del 60% quando il mouse ci passa sopra.
    </div>
    <div id="div2">
      Questo div ha un'opacità del 40% quando il mouse ci passa sopra.
    </div>
    <div id="div3">
      Questo div ha un'opacità del 20% quando il mouse ci passa sopra.
    </div>
  </body>
</html>