<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8"> <!-- Imposta il set di caratteri della pagina -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ottimizza la visualizzazione su dispositivi mobili -->
<title>Document</title> <!-- Titolo della pagina -->
<link rel="stylesheet" href="styles.css"> <!-- Collega il file CSS -->
</head>
<body>
<h1>Ciao, Mondo!</h1> <!-- Intestazione principale della pagina -->
<p>Questa è la struttura di base di una pagina HTML.</p> <!-- Paragrafo di testo -->
</body>
</html>
2. Form Semplice
<form action="/submit" method="POST"> <!-- Inizia un form con metodo POST -->
<label for="name">Nome:</label> <!-- Etichetta per il campo nome -->
<input type="text" id="name" name="name" required> <!-- Campo di testo per il nome con attributo required -->
<label for="email">Email:</label> <!-- Etichetta per il campo email -->
<input type="email" id="email" name="email" required> <!-- Campo email con convalida di formato -->
<input type="submit" value="Invia"> <!-- Bottone di invio del form -->
</form>
3. Aggiunta di immagini
<!-- Inserisce un'immagine con descrizione alternativa e dimensioni specificate -->
<img src="immagine.jpg" alt="Descrizione dell'immagine" width="400" height="300">
4. Video HTML5
<!-- Integrazione di un video con controlli di riproduzione -->
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4"> <!-- Indica il file e il tipo di video -->
Il tuo browser non supporta il tag video. <!-- Messaggio mostrato se il video non è supportato -->
</video>
5. Collegamenti ipertestuali
<!-- Collegamento a una pagina esterna con apertura in una nuova scheda -->
<a href="https://www.google.com" target="_blank">Visita Google</a>
<!-- Collegamento che scorre alla sezione interna della pagina -->
<a href="#sezione2">Vai alla sezione 2</a>
<!-- Collegamento per aprire un'email -->
<a href="mailto:esempio@mail.com">Inviami un'email</a>
6. Sezione con una tabella
<!-- Tabella con intestazione e corpo della tabella -->
<table>
<thead>
<tr>
<th>Nome</th> <!-- Intestazione della colonna Nome -->
<th>Età</th> <!-- Intestazione della colonna Età -->
</tr>
</thead>
<tbody>
<tr>
<td>Mario</td> <!-- Riga con valore nella colonna Nome -->
<td>30</td> <!-- Riga con valore nella colonna Età -->
</tr>
<tr>
<td>Luigi</td>
<td>28</td>
</tr>
</tbody>
</table>
7. Lista ordinata e non ordinata
<!-- Lista non ordinata -->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<!-- Lista ordinata -->
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
8. Bottoni e input
<!-- Bottone semplice -->
<button>Premi qui</button>
<!-- Input di testo con placeholder -->
<input type="text" placeholder="Inserisci il tuo nome">
<!-- Input checkbox con etichetta -->
<label>
<input type="checkbox" name="consenso" value="1"> <!-- Checkbox per accettare condizioni -->
Accetto i termini e condizioni
</label>
9. Elementi di blocco e inline
<!-- Esempio di elemento blocco -->
<div>
Questo è un blocco.
</div>
<!-- Esempio di elemento inline -->
<span>Questo è un testo inline.</span>
10. Ancoraggi e collegamenti interni
<!-- Sezione di destinazione dell'ancoraggio -->
<h2 id="sezione2">Sezione 2</h2>
<p>Questo è il contenuto della sezione 2.</p>
<!-- Collegamento che scorre fino alla sezione -->
<a href="#sezione2">Vai alla sezione 2</a>
11. Embed di Google Maps
<!-- Integrazione di una mappa di Google tramite iframe -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509607!2d144.95592831540444!3d-
37.817209979751954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43b87e0b3b%3A0x50456752
18ce7e33!2zTWVsYm91cm5lLCBBdXN0cmFsaWE!5e0!3m2!1sit!2sit!4v1625799864557!5m2!1sit!2sit"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
12. Iframe per incorporare video YouTube
<!-- Integrazione di un video YouTube tramite iframe -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
14. Tag details e summary per contenuti espandibili
<!-- Il tag <details> permette di creare una sezione espandibile -->
<details>
<summary>Clicca per espandere i dettagli</summary> <!-- Testo che l'utente vedrà prima di espandere -->
<p>Questo è il contenuto nascosto che verrà mostrato una volta espanso.</p> <!-- Contenuto nascosto all'inizio -->
</details>
1. Reset CSS
/* Reset CSS - Azzera margini e padding predefiniti e imposta box-sizing */
*,
*::before,
*::after {
margin: 0; /* Rimuove il margine predefinito */
padding: 0; /* Rimuove il padding predefinito */
box-sizing: border-box; /* Include padding e bordo nella dimensione totale dell'elemento */
}
html {
font-size: 100%; /* Imposta la dimensione del font di base a 16px */
-webkit-text-size-adjust: 100%; /* Evita zoom automatico sui dispositivi mobili */
}
body {
line-height: 1.5; /* Imposta un'altezza di linea standard */
font-family: sans-serif; /* Usa un font senza grazie come predefinito */
}
2. Flexbox Layout
/* Contenitore flexbox che centra l'elemento figlio orizzontalmente e verticalmente */
.container {
display: flex; /* Attiva il layout flexbox */
justify-content: center; /* Centra l'elemento figlio orizzontalmente */
align-items: center; /* Centra l'elemento figlio verticalmente */
height: 100vh; /* Imposta l'altezza del contenitore al 100% della viewport */
}
3. Grid Layout
/* Layout a griglia che si adatta automaticamente alla larghezza del contenitore */
.grid-container {
display: grid; /* Attiva il layout grid */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Genera tante colonne da riempire automaticamente con un minimo di 200px */
gap: 20px; /* Spazio tra gli elementi della griglia */
}
4. CSS Variables (Custom Properties)
:root {
/* Definizione delle variabili globali */
--main-bg-color: #f0f0f0; /* Colore di sfondo principale */
--primary-color: #3498db; /* Colore primario */
--font-size-large: 18px; /* Dimensione del font grande */
}
body {
background-color: var(--main-bg-color); /* Applica il colore di sfondo */
color: var(--primary-color); /* Applica il colore del testo */
font-size: var(--font-size-large); /* Imposta la dimensione del font */
}
5. Media Queries Responsive
/* Modifica del layout per schermi con larghezza inferiore a 768px */
@media (max-width: 768px) {
.container {
flex-direction: column; /* Dispone gli elementi in una colonna verticale su schermi piccoli */
}
}
6. Hover con Transizioni
/* Bottone con transizione per il cambio di colore al passaggio del mouse */
.button {
background-color: #3498db; /* Colore di sfondo iniziale */
color: #fff; /* Colore del testo */
padding: 10px 20px; /* Spaziatura interna */
transition: background-color 0.3s ease; /* Transizione morbida sul colore di sfondo */
}
.button:hover {
background-color: #2980b9; /* Cambia il colore di sfondo al passaggio del mouse */
}
7. Sticky Header
/* Header che rimane fisso nella parte superiore della finestra */
.header {
position: sticky; /* Mantiene l'header in posizione quando si scrolla */
top: 0; /* Fissa l'header in cima alla finestra */
background-color: white; /* Colore di sfondo dell'header */
z-index: 1000; /* Assicura che l'header sia visibile sopra altri contenuti */
}
8. Scrollbar Personalizzata
/* Scrollbar personalizzata */
::-webkit-scrollbar {
width: 10px; /* Larghezza della scrollbar */
}
::-webkit-scrollbar-track {
background: #f0f0f0; /* Colore della traccia della scrollbar */
}
::-webkit-scrollbar-thumb {
background-color: #3498db; /* Colore della barra di scorrimento */
border-radius: 10px; /* Bordo arrotondato per la barra */
border: 2px solid #f0f0f0; /* Spazio vuoto attorno alla scrollbar */
}
9. Overlay con Modal
/* Overlay che copre tutta la finestra */
.overlay {
position: fixed; /* Fissa l'overlay sopra tutti i contenuti */
top: 0;
left: 0;
width: 100vw; /* Copre tutta la larghezza della finestra */
height: 100vh; /* Copre tutta l'altezza della finestra */
background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
display: flex; /* Usa flexbox per centrare la modal */
justify-content: center; /* Centra orizzontalmente la modal */
align-items: center; /* Centra verticalmente la modal */
z-index: 1000; /* Posiziona l'overlay sopra il contenuto della pagina */
}
/* Modal centrata */
.modal {
background-color: white; /* Colore di sfondo della modal */
padding: 20px; /* Spaziatura interna */
border-radius: 5px; /* Bordo arrotondato */
width: 90%; /* Larghezza massima del 90% della viewport */
max-width: 400px; /* Larghezza massima della modal */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Aggiunge un'ombra alla modal */
}
10. Caricamento Lazy delle Immagini
/* Aggiungere loading="lazy" all'HTML per abilitare il lazy loading */
img {
display: block; /* Evita spazi vuoti sotto le immagini */
width: 100%; /* Immagine si adatta alla larghezza del contenitore */
height: auto; /* Mantiene proporzioni */
object-fit: cover; /* Assicura che l'immagine riempia il contenitore */
}
11. Effetto di Fading per le Immagini
/* Applica transizione al caricamento dell'immagine */
img {
opacity: 0; /* L'immagine inizia invisibile */
transition: opacity 0.5s ease; /* Graduale transizione di visibilità */
}
img.loaded {
opacity: 1; /* Una volta caricata, l'immagine diventa completamente visibile */
}
12. Dark Mode
/* Modalità dark per utenti che preferiscono il tema scuro */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212; /* Sfondo scuro */
color: #ffffff; /* Testo chiaro */
}
a {
color: #bb86fc; /* Colore del link nel tema scuro */
}
}
13. Text Ellipsis (Testo Troncato con ...)
/* Testo tronca con "..." se eccede la larghezza disponibile */
.truncate {
white-space: nowrap; /* Mantiene il testo su una singola riga */
overflow: hidden; /* Nasconde il testo in eccesso */
text-overflow: ellipsis; /* Aggiunge "..." per indicare il troncamento */
width: 100%; /* Assicura che l'elemento abbia una larghezza definita */
}
14. Keyframe Animations
/* Definizione di una keyframe animation chiamata "shake" */
@keyframes shake {
0% { transform: translateX(0); } /* Posizione iniziale */
25% { transform: translateX(-5px); } /* Sposta a sinistra */
50% { transform: translateX(5px); } /* Sposta a destra */
75% { transform: translateX(-5px); } /* Sposta di nuovo a sinistra */
100% { transform: translateX(0); } /* Ritorna alla posizione originale */
}
/* Applicazione dell'animazione "shake" */
.shake {
animation: shake 0.5s ease-in-out; /* Esegui l'animazione in 0.5s con un'entrata e uscita morbida */
}
1. Event Listener
// Aggiunge un listener per l'evento di clic al bottone
const button = document.querySelector('.button'); // Seleziona il bottone dal DOM
button.addEventListener('click', function() {
alert('Bottone cliccato!'); // Mostra un avviso quando il bottone viene cliccato
});
2. Toggle Class
// Aggiunge o rimuove la classe 'active' quando il bottone viene cliccato
const toggleButton = document.querySelector('.toggle-btn'); // Seleziona l'elemento
const menu = document.querySelector('.menu'); // Seleziona il menu
toggleButton.addEventListener('click', function() {
menu.classList.toggle('active'); // Aggiunge/rimuove la classe 'active'
});
3. Debounce Function
// Funzione debounce: esegue il codice solo se la funzione non viene chiamata entro il tempo specificato
function debounce(func, wait) {
let timeout; // Variabile per memorizzare il timeout
return function() {
const context = this, args = arguments;
clearTimeout(timeout); // Cancella il timeout se la funzione è chiamata di nuovo prima del termine
timeout = setTimeout(function() {
func.apply(context, args); // Esegue la funzione dopo il ritardo
}, wait);
};
}
// Utilizzo della funzione debounce
window.addEventListener('resize', debounce(function() {
console.log('Ridimensionamento finestra!'); // Mostra un messaggio quando il ridimensionamento si ferma
}, 200)); // 200 ms di attesa prima di eseguire la funzione
4. Throttling
// Funzione throttle: limita l'esecuzione a intervalli regolari
function throttle(func, limit) {
let inThrottle; // Variabile per controllare se siamo in attesa
return function() {
const context = this, args = arguments;
if (!inThrottle) { // Se non siamo in attesa
func.apply(context, args); // Esegui la funzione
inThrottle = true;
setTimeout(() => inThrottle = false, limit); // Blocca ulteriori esecuzioni per un certo periodo
}
};
}
// Utilizzo della funzione throttle
window.addEventListener('scroll', throttle(function() {
console.log('Scroll rilevato!'); // Esegue l'azione a intervalli regolari durante lo scroll
}, 100)); // Limita l'esecuzione a una volta ogni 100 ms
5. Fetch API
// Esegue una richiesta GET a un'API e gestisce la risposta
fetch('https://jsonplaceholder.typicode.com/posts') // URL dell'API
.then(response => response.json()) // Trasforma la risposta in JSON
.then(data => console.log(data)) // Log dei dati ottenuti
.catch(error => console.error('Errore:', error)); // Gestisce gli errori della richiesta
6. Async/Await
// Funzione asincrona che usa fetch per ottenere dati da un'API
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts'); // Attende la risposta
const data = await response.json(); // Attende la conversione della risposta in JSON
console.log(data); // Mostra i dati nel console
} catch (error) {
console.error('Errore:', error); // Gestisce eventuali errori
}
}
fetchData(); // Esegue la funzione
7. Local Storage
// Salva un valore nel local storage
localStorage.setItem('username', 'JohnDoe'); // Memorizza la stringa 'JohnDoe' sotto la chiave 'username'
// Recupera il valore dal local storage
const username = localStorage.getItem('username'); // Ottiene il valore di 'username'
console.log(username); // Stampa 'JohnDoe'
// Rimuove un elemento dal local storage
localStorage.removeItem('username'); // Rimuove l'elemento con chiave 'username'
8. Form Validation
// Validazione di un campo form al submit
const form = document.querySelector('form'); // Seleziona il form
form.addEventListener('submit', function(event) {
const email = document.querySelector('#email').value; // Ottiene il valore del campo email
if (!email.includes('@')) { // Controlla se l'email contiene il simbolo '@'
event.preventDefault(); // Previene l'invio del form
alert('Inserisci una email valida!'); // Mostra un messaggio di errore
}
});
9. Scroll to Element
// Scorre fino a un elemento specifico con animazione smooth
const scrollToSection = document.querySelector('#section'); // Seleziona la sezione
document.querySelector('.scroll-btn').addEventListener('click', function() {
scrollToSection.scrollIntoView({ behavior: 'smooth' }); // Effettua uno scroll fluido alla sezione
});
10. IIFE (Immediately Invoked Function Expression)
// IIFE (Immediately Invoked Function Expression)
(function() {
const message = 'IIFE è stata eseguita immediatamente'; // Variabile locale
console.log(message); // Mostra il messaggio
})(); // La funzione viene eseguita immediatamente
11. Dynamic Element
// Crea e aggiunge un nuovo elemento al DOM
const newElement = document.createElement('div'); // Crea un nuovo div
newElement.textContent = 'Sono un nuovo elemento'; // Aggiunge il contenuto di testo
document.body.appendChild(newElement); // Aggiunge il nuovo elemento al body della pagina
12. Toggle Dark Mode
// Alterna la modalità scura/chiara
const toggleDarkMode = document.querySelector('.dark-mode-toggle'); // Seleziona il pulsante per il dark mode
toggleDarkMode.addEventListener('click', function() {
document.body.classList.toggle('dark-mode'); // Aggiunge o rimuove la classe 'dark-mode'
});
13. Array Methods (map, filter, reduce)
const numbers = [1, 2, 3, 4, 5];
// Esempio con map: moltiplica ogni elemento per 2
const doubled = numbers.map(number => number * 2);
console.log(doubled); // Stampa [2, 4, 6, 8, 10]
// Esempio con filter: filtra i numeri maggiori di 2
const filtered = numbers.filter(number => number > 2);
console.log(filtered); // Stampa [3, 4, 5]
// Esempio con reduce: somma tutti i numeri
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // Stampa 15
14. Date Management
// Ottenere la data corrente
const today = new Date();
console.log(today.toDateString()); // Stampa la data in un formato leggibile
1. Scroll Indicator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Indicator</title>
<!-- icona freccia css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Contenitore del pulsante di ritorno */
#scrollIndicator {
position: fixed;
/* Fissa il pulsante in basso a destra */
bottom: 20px;
/* Distanza dal bordo inferiore della finestra */
right: 20px;
/* Distanza dal bordo destro della finestra */
width: 40px;
/* Larghezza del pulsante */
height: 40px;
/* Altezza del pulsante */
border-radius: 50%;
/* Rende il pulsante circolare */
background-color: white;
/* Colore di sfondo del pulsante */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Aggiunge un'ombra per un effetto di profondità */
cursor: pointer;
/* Cambia il cursore quando si passa sul pulsante */
display: flex;
/* Usa Flexbox per centrare il contenuto */
align-items: center;
/* Allinea verticalmente l'icona freccia */
justify-content: center;
/* Allinea orizzontalmente l'icona freccia */
transition: background 0.3s ease;
/* Aggiunge una transizione morbida al cambio di sfondo */
}
/* Stile per l'icona freccia */
.arrow {
font-size: 16px;
/* Dimensione dell'icona freccia */
color: black;
/* Colore dell'icona freccia */
position: absolute;
/* Mantiene l'icona al centro del pulsante */
z-index: 1;
/* Assicura che l'icona sia sopra l'SVG */
}
/* Stile per il contenitore SVG */
.progress-ring {
position: absolute;
/* Posiziona l'SVG al centro del pulsante */
top: 0;
left: 0;
z-index: 0;
/* Posiziona il cerchio sotto l'icona freccia */
}
/* Stile per il cerchio di avanzamento */
.progress-ring__circle {
transition: stroke-dashoffset 0.1s;
/* Aggiunge un'animazione per l'avanzamento del cerchio */
transform: rotate(-90deg);
/* Ruota il cerchio per far iniziare l'animazione dall'alto */
transform-origin: 50% 50%;
/* Imposta il punto di rotazione al centro del cerchio */
}
/* Stile per il contenuto della pagina (simulazione di una pagina lunga) */
.content {
height: 2000px;
/* Aggiunge altezza per creare uno scroll lungo */
padding: 20px;
/* Aggiunge padding al contenuto */
font-family: Arial, sans-serif;
/* Font del testo */
text-align: center;
/* Centra il testo */
font-size: 20px;
/* Dimensione del testo */
color: var(--text-color);
/* Colore del testo */
}
</style>
</head>
<body>
<main>
<!-- Contenitore per il pulsante dello scroll -->
<div id="scrollIndicator" onclick="scrollToTop()">
<!-- SVG per disegnare il cerchio di avanzamento -->
<svg class="progress-ring" width="40" height="40">
<!-- Cerchio che rappresenta la barra di progresso dello scroll -->
<circle class="progress-ring__circle" stroke="#00bfff" stroke-width="3" fill="transparent" r="18"
cx="20" cy="20" />
</svg>
<i class="fas fa-chevron-up arrow"></i>
</div>
<!-- Sezione con contenuto lungo per simulare lo scroll -->
<div class="content">
<h2>Scroll down the page</h2>
<i class="fas fa-chevron-down"></i>
</div>
</main>
<script>
/* Seleziona il cerchio dell'SVG con la classe progress-ring__circle */
const scrollIndicator = document.querySelector('.progress-ring__circle');
/* Calcola il raggio e la circonferenza del cerchio */
const radius = scrollIndicator.r.baseVal.value; /* Raggio del cerchio */
const circumference = 2 * Math.PI * radius; /* Circonferenza del cerchio */
/* Imposta l'array dei trattini in base alla circonferenza calcolata */
scrollIndicator.style.strokeDasharray = `${circumference} ${circumference}`;
/* Imposta l'offset del tratto per nascondere inizialmente l'intero cerchio */
scrollIndicator.style.strokeDashoffset = circumference;
/* Funzione per aggiornare il progresso del cerchio */
function setProgress(percent) {
/* Calcola l'offset in base alla percentuale di scroll */
const offset = circumference - (percent / 100) * circumference;
/* Imposta l'offset calcolato per rivelare parte del cerchio */
scrollIndicator.style.strokeDashoffset = offset;
}
/* Aggiunge un listener all'evento di scroll della pagina */
window.addEventListener('scroll', () => {
/* Calcola quanto la pagina è stata scrollata */
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
/* Calcola la lunghezza totale scrollabile della pagina */
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
/* Calcola la percentuale di scroll */
const scrollPercent = (scrollTop / scrollHeight) * 100;
/* Imposta il progresso del cerchio in base alla percentuale di scroll */
setProgress(scrollPercent);
});
/* Funzione per tornare in cima alla pagina */
function scrollToTop() {
window.scrollTo({
top: 0, /* Imposta la destinazione dello scroll in cima */
behavior: 'smooth' /* Effetto di scroll fluido */
});
}
</script>
</body>
</html>
2. Card Interattive
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8"> <!-- Definisce la codifica dei caratteri -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Imposta la finestra di visualizzazione per i dispositivi mobili -->
<title>Card Interattive</title> <!-- Titolo della pagina visualizzato nella scheda del browser -->
<style>
/* Reset CSS di base per garantire la coerenza tra i browser */
* {
box-sizing: border-box; /* Include padding e bordi nella larghezza/altezza totale */
margin: 0; /* Rimuove il margine predefinito */
padding: 0; /* Rimuove il padding predefinito */
}
/* Stile del body: centralizza il contenuto verticalmente e orizzontalmente */
body {
font-family: Arial, sans-serif; /* Font utilizzato nel body */
background-color: #f0f2f5; /* Colore di sfondo */
min-height: 100vh; /* Altezza minima pari all'altezza della viewport */
display: flex; /* Utilizza flexbox per il layout */
justify-content: center; /* Centra orizzontalmente */
align-items: center; /* Centra verticalmente */
}
/* Container principale: gestisce il layout delle card */
.container {
display: flex; /* Layout flexbox */
justify-content: center; /* Centra le card orizzontalmente */
flex-wrap: wrap; /* Permette alle card di andare a capo su schermi piccoli */
gap: 2rem; /* Spazio tra le card */
padding: 2rem; /* Spaziatura interna */
max-width: 1200px; /* Larghezza massima del contenitore */
margin: 0 auto; /* Centra il contenitore nella pagina */
}
/* Stile base della card */
.card {
width: 200px; /* Larghezza fissa della card */
height: 300px; /* Altezza fissa della card */
perspective: 1000px; /* Crea l'effetto 3D per la rotazione */
cursor: pointer; /* Cambia il cursore al passaggio del mouse */
transition: transform 0.3s ease; /* Animazione fluida per l'hover */
}
/* Effetto hover sulla card */
.card:hover {
transform: scale(1.05); /* Ingrandisce leggermente la card al passaggio del mouse */
}
/* Contenitore interno della card che gestisce la rotazione */
.card-inner {
position: relative; /* Posizione relativa per contenere elementi posizionati assolutamente */
width: 100%; /* Larghezza completa */
height: 100%; /* Altezza completa */
text-align: center; /* Allinea il testo al centro */
transition: transform 0.3s; /* Animazione fluida per la rotazione */
transform-style: preserve-3d; /* Mantiene l'effetto 3D durante la rotazione */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra sottile per effetto di profondità */
}
/* Classe che viene aggiunta/rimossa per girare la card */
.card.flipped .card-inner {
transform: rotateY(180deg); /* Ruota la card di 180 gradi sull'asse Y */
}
/* Stili comuni per il fronte e il retro della card */
.card-front,
.card-back {
position: absolute; /* Posiziona gli elementi in modo assoluto */
width: 100%; /* Larghezza completa */
height: 100%; /* Altezza completa */
backface-visibility: hidden; /* Nasconde il lato posteriore durante la rotazione */
border-radius: 10px; /* Angoli arrotondati */
overflow: hidden; /* Nasconde contenuti in eccesso */
}
/* Stile specifico per il fronte della card */
.card-front {
background-color: #bbb; /* Colore di fallback */
color: black; /* Colore del testo */
}
/* Stile dell'immagine nel fronte della card */
.card-front img {
width: 100%; /* Larghezza completa */
height: 100%; /* Altezza completa */
object-fit: cover; /* Adatta l'immagine alla card mantenendo le proporzioni */
}
/* Stile specifico per il retro della card */
.card-back {
background-color: #2c3e50; /* Colore di sfondo */
color: white; /* Colore del testo */
transform: rotateY(180deg); /* Inizialmente ruotato di 180 gradi */
display: flex; /* Layout flessibile per centrare i contenuti */
flex-direction: column; /* Dispone gli elementi in colonna */
justify-content: center; /* Allinea verticalmente i contenuti */
align-items: center; /* Allinea orizzontalmente i contenuti */
padding: 20px; /* Spaziatura interna */
}
/* Stile del titolo nel retro della card */
.card-back h3 {
font-size: 24px; /* Dimensione del font */
margin-bottom: 10px; /* Margine inferiore */
}
/* Stile del paragrafo nel retro della card */
.card-back p {
font-size: 16px; /* Dimensione del font */
line-height: 1.5; /* Altezza della linea */
}
</style>
</head>
<body>
<main>
<!-- Container principale che contiene tutte le card -->
<div class="container">
<!-- Prima card -->
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="montagna.jpg" alt="Montagna"> <!-- Immagine per il fronte della card -->
</div>
<div class="card-back">
<h3>Montagna</h3> <!-- Titolo sul retro della card -->
<p>Esplora le maestose vette e i panorami mozzafiato.</p> <!-- Descrizione sul retro della card -->
</div>
</div>
</div>
<!-- Seconda card -->
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="spiaggia.jpg" alt="Spiaggia"> <!-- Immagine per il fronte della card -->
</div>
<div class="card-back">
<h3>Spiaggia</h3> <!-- Titolo sul retro della card -->
<p>Rilassati sulla sabbia dorata e ascolta il suono delle onde.</p> <!-- Descrizione sul retro della card -->
</div>
</div>
</div>
<!-- Terza card -->
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="citta.jpg" alt="Città"> <!-- Immagine per il fronte della card -->
</div>
<div class="card-back">
<h3>Città</h3> <!-- Titolo sul retro della card -->
<p>Scopri l'energia e la cultura delle metropoli moderne.</p> <!-- Descrizione sul retro della card -->
</div>
</div>
</div>
</div>
</main>
<script>
// Seleziona tutte le card e applica gli event listener a ciascuna
document.querySelectorAll('.card').forEach(card => {
// Variabile per tenere traccia dello stato del mouse sulla card
let isMouseOver = false;
// Event listener per il click sulla card
card.addEventListener('click', () => {
// Aggiunge o rimuove la classe 'flipped' per girare la card
card.classList.toggle('flipped');
});
// Event listener per quando il mouse entra nell'area della card
card.addEventListener('mouseenter', () => {
isMouseOver = true;
});
// Event listener per quando il mouse esce completamente dall'area della card
card.addEventListener('mouseleave', () => {
isMouseOver = false;
// Se la card è girata, impostiamo un timeout per riportarla indietro
if (card.classList.contains('flipped')) {
rotationTimeout = setTimeout(() => {
card.classList.remove('flipped');
}, 1000); // 1000 millisecondi = 1 secondo
}
});
});
</script>
</body>
</html>
3. Minimal Navbar
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Dichiarazione del charset per definire la codifica del testo -->
<meta charset="UTF-8">
<!-- Impostazione del viewport per garantire che la pagina sia responsiva su dispositivi mobili -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titolo della pagina -->
<title>Minimal Navbar</title>
</head>
<style>
/* Stile per il contenitore principale della navbar */
.minimal-navbar__container {
display: flex; /* Disposizione degli elementi della navbar in riga */
justify-content: space-between; /* Spaziatura tra gli elementi */
align-items: center; /* Allineamento verticale al centro */
padding: 1rem 2rem; /* Spaziatura interna: 1rem in alto/basso e 2rem ai lati */
background-color: #333; /* Sfondo della navbar di colore grigio scuro */
color: white; /* Colore del testo bianco */
}
/* Stile per il logo della navbar */
.minimal-navbar__logo {
font-size: 1.5rem; /* Dimensione del testo per il logo */
font-weight: bold; /* Logo in grassetto */
}
/* Stile per il menu della navbar */
.minimal-navbar__menu {
display: flex; /* Disposizione degli elementi del menu in riga */
list-style-type: none; /* Rimozione dei puntini dei list item */
}
/* Cambia il colore del testo al passaggio del mouse sul menu */
.minimal-navbar__menu:hover {
color: #007bf0; /* Colore blu al passaggio del mouse */
}
/* Stile per i link all'interno della navbar */
.minimal-navbar__link {
color: white; /* Colore dei link bianco */
text-decoration: none; /* Rimozione della sottolineatura */
padding: 0.5rem 1rem; /* Spaziatura interna per i link */
}
/* Colore e cursore al passaggio del mouse sui link */
.minimal-navbar__link:hover {
color: blue; /* Cambia colore in blu */
cursor: pointer; /* Mostra il cursore puntatore */
}
/* Stile per l'hamburger menu (in versione desktop non visibile) */
.minimal-navbar__burger {
display: none; /* Nasconde il burger menu su schermi larghi */
flex-direction: column; /* Disposizione delle linee del burger in colonna */
cursor: pointer; /* Cambia il cursore a puntatore */
}
/* Stile per le linee che compongono il burger menu */
.minimal-navbar__burger-line {
width: 30px; /* Larghezza delle linee */
height: 3.2px; /* Altezza delle linee */
background-color: white; /* Colore bianco per le linee */
margin: 3px 0; /* Margine verticale tra le linee */
transition: 0.4s; /* Transizione morbida per le animazioni */
padding: 0.4px; /* Padding leggero per le linee */
}
/* Effetto di scaling sul burger menu al passaggio del mouse */
.minimal-navbar__burger:hover {
scale: 1.1; /* Aumenta la dimensione del burger menu */
transition: 0.2s; /* Durata della transizione */
}
/* Media query per dispositivi con larghezza massima di 768px (tablet e smartphone) */
@media (max-width: 768px) {
/* Nasconde il menu e lo riposiziona verticalmente per mobile */
.minimal-navbar__menu {
display: none; /* Nasconde il menu */
flex-direction: column; /* Dispone gli elementi del menu in colonna */
position: absolute; /* Menu posizionato in modo assoluto */
top: 180px; /* Posiziona il menu a 180px dal top */
left: 60%; /* Posiziona il menu a sinistra del 60% */
width: 35%; /* Larghezza del menu al 35% della pagina */
background-color: #333; /* Sfondo del menu uguale alla navbar */
padding: 1rem 0; /* Padding interno verticale */
}
/* Quando il menu è attivo, mostralo */
.minimal-navbar__menu.minimal-active {
display: flex; /* Mostra il menu */
}
/* Mostra l'hamburger menu su mobile */
.minimal-navbar__burger {
display: flex; /* Visualizza il burger menu */
}
/* Anima la prima linea del burger quando attivo (ruotandola) */
.minimal-navbar__burger.minimal-active .minimal-navbar__burger-line:nth-child(1) {
transform: rotate(-45deg) translate(-7.2px, 6px); /* Rotazione e traslazione */
}
/* Nasconde la seconda linea del burger menu quando attivo */
.minimal-navbar__burger.minimal-active .minimal-navbar__burger-line:nth-child(2) {
opacity: 0; /* Rende la seconda linea invisibile */
}
/* Anima la terza linea del burger quando attivo (ruotandola) */
.minimal-navbar__burger.minimal-active .minimal-navbar__burger-line:nth-child(3) {
transform: rotate(45deg) translate(-7.2px, -6px); /* Rotazione e traslazione */
}
}
</style>
<body>
<!-- Inizio del componente navbar -->
<nav class="minimal-navbar__container">
<!-- Logo della navbar -->
<div class="minimal-navbar__logo">
Logo
</div>
<!-- Menu di navigazione -->
<ul class="minimal-navbar__menu">
<li><a href="#" class="minimal-navbar__link">Home</a></li>
<li><a href="#" class="minimal-navbar__link">Chi siamo</a></li>
<li><a href="#" class="minimal-navbar__link">Servizi</a></li>
<li><a href="#" class="minimal-navbar__link">Contatti</a></li>
</ul>
<!-- Hamburger menu per dispositivi mobili -->
<div class="minimal-navbar__burger">
<!-- Le tre linee che compongono il burger menu -->
<div class="minimal-navbar__burger-line"></div>
<div class="minimal-navbar__burger-line"></div>
<div class="minimal-navbar__burger-line"></div>
</div>
</nav>
<script>
// Attende che l'intera pagina sia stata caricata prima di eseguire il codice
document.addEventListener('DOMContentLoaded', function () {
// Seleziona gli elementi della navbar
const minimalNavContainer = document.querySelector('.minimal-navbar__container');
const minimalNavMenu = minimalNavContainer.querySelector('.minimal-navbar__menu');
const minimalBurger = minimalNavContainer.querySelector('.minimal-navbar__burger');
// Aggiunge un event listener al clic sull'hamburger menu
minimalBurger.addEventListener('click', () => {
minimalNavMenu.classList.toggle('minimal-active'); // Mostra/nasconde il menu
minimalBurger.classList.toggle('minimal-active'); // Attiva l'animazione del burger
});
// Chiude il menu quando si clicca su un link all'interno del menu
const minimalNavLinks = minimalNavContainer.querySelectorAll('.minimal-navbar__link');
minimalNavLinks.forEach(link => {
link.addEventListener('click', () => {
minimalNavMenu.classList.remove('minimal-active'); // Chiude il menu
minimalBurger.classList.remove('minimal-active'); // Ripristina l'hamburger
});
});
// Chiude il menu se si clicca fuori dalla navbar
document.addEventListener('click', (event) => {
if (!minimalNavContainer.contains(event.target) && minimalNavMenu.classList.contains('minimal-active')) {
minimalNavMenu.classList.remove('minimal-active'); // Chiude il menu
minimalBurger.classList.remove('minimal-active'); // Ripristina l'hamburger
}
});
});
</script>
</body>
</html>
4. Form Effetti Resize
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Metadati di base -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Effetti Resize</title>
<style>
/* Stile generale del body */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* Stile del contenitore principale */
.container {
background: #3a3a3a;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
/* Stile del titolo */
h1 {
text-align: center;
color: #007bf0;
margin-bottom: 2rem;
}
/* Stile dei gruppi di form */
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
/* Stile delle etichette */
.form-group label {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
background: #3a3a3a;
padding: 0 5px;
color: white;
transition: 0.2s ease all;
pointer-events: none;
}
/* Posizionamento dell'etichetta per l'area di testo */
.form-group textarea + label {
top: 25px;
}
/* Stile degli input e delle aree di testo */
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #007bf0;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: 0.2s ease all;
box-sizing: border-box;
background-color: #3a3a3a;
color: white;
}
/* Stile specifico per l'area di testo */
.form-group textarea {
height: 100px;
resize: vertical;
}
/* Effetto focus sugli input e le aree di testo */
.form-group input:focus,
.form-group textarea:focus {
border-color: #007bf0;
}
/* Effetto di spostamento dell'etichetta quando l'input è in focus o non vuoto */
.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
top: 0;
font-size: 12px;
color: white;
}
/* Stile del pulsante di invio */
button {
width: 100%;
padding: 12px;
background: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s ease background;
}
/* Effetto hover sul pulsante */
button:hover {
background: #45a049;
}
/* Animazione di scuotimento */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Applicazione dell'animazione e cambio colore per input invalidi */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
border-color: #ff6b6b;
animation: shake 0.3s;
}
</style>
</head>
<body>
<!-- Contenitore principale del form -->
<div class="container">
<!-- Titolo del form -->
<h1>Invia un messaggio</h1>
<!-- Inizio del form -->
<form>
<!-- Campo Nome -->
<div class="form-group">
<input type="text" id="nome" required placeholder=" ">
<label for="nome">Nome</label>
</div>
<!-- Campo Email -->
<div class="form-group">
<input type="email" id="email" required placeholder=" ">
<label for="email">Email</label>
</div>
<!-- Campo Oggetto -->
<div class="form-group">
<input type="text" id="oggetto" required placeholder=" ">
<label for="oggetto">Oggetto</label>
</div>
<!-- Campo Messaggio -->
<div class="form-group">
<textarea id="messaggio" required placeholder=" "></textarea>
<label for="messaggio">Messaggio</label>
</div>
<!-- Pulsante di invio -->
<button type="submit">Invia messaggio <i class="fa-solid fa-share"></i></button>
</form>
</div>
</body>
</html>