Obiettivo
Usare `transition`, `transform` e cambi colore per comunicare interazione senza disturbare la lettura.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Un bottone principale.
- Una card cliccabile.
- Effetto hover e focus visibile.
- Durata breve e coerente.
Procedura consigliata
- Non animare troppe proprietà contemporaneamente.
- Evita movimenti ampi che fanno saltare il layout.
- Aggiungi anche `:focus-visible`, non solo `:hover`.
- Controlla che il testo resti leggibile durante il cambio colore.
Commento: lavora sempre su una copia del file. In CSS è più facile capire un errore se modifichi una proprietà alla volta e controlli subito il risultato nel browser.
Base HTML commentata
Puoi partire da questa struttura e completarla con contenuti reali.
<a class="action-button" href="#">Apri esempio</a>
<a class="interactive-card" href="#">
<h3>Card interattiva</h3>
<p>Passa il mouse o usa la tastiera.</p>
</a>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.action-button,
.interactive-card { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.action-button:hover,
.interactive-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, .14); }
.action-button:focus-visible,
.interactive-card:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
Controllo finale
- La pagina resta leggibile su smartphone?
- I nomi delle classi descrivono davvero il contenuto?
- Il componente può essere riutilizzato in un’altra pagina?
- Hover e focus sono visibili ma non invadenti?
Continua con gli esercizi
Procedi con la traccia successiva oppure torna all’indice degli esercizi.