Card prodotto
Box con immagine simulata, badge, ombra e bottone.
Componenti
Box, card e alert
Molti componenti web sono box: card, pannelli, alert, modali e sezioni informative. Il box model è la base per controllarli.
Teoria rapida
PaddingSpazio interno.
MarginSpazio esterno.
BorderContorno del box.
ShadowProfondità visiva.
Esempi interattivi
Modifica il codice e osserva l’anteprima live.
box-shadow
Alert box
Messaggi informativi con bordo laterale e colori semantici.
Verifica
Quiz su Box model e card
Rispondi alle domande per controllare subito la comprensione dell’argomento.
1. Quale proprietà arrotonda gli angoli?
2. Quale proprietà crea ombre esterne?
3. Che cosa fa padding?
4. Che cosa fa margin?
5. Quale proprietà controlla il bordo?
6. overflow: hidden può servire a...
Esercitazione libera
Laboratorio libero: Box model e card
Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.
- Duplica la card e crea una griglia di prodotti.
- Cambia il bordo laterale degli alert usando altri colori.
- Aggiungi un effetto hover alla card.
- Progetta un box profilo con nome, ruolo e pulsante.