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>