📢 Nuovo Corso Laravel API disponibile!

Esercizi Box Shadow CSS

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>