Box di avviso in CSS (info, successo, attenzione, errore)
Scegli i tipi di avviso, lo stile e se il box può essere chiuso. L’anteprima mostra tutti i tipi insieme.
Come si usaMetti in evidenza ciò che non deve passare inosservato
Disponibile in: 
Box di avviso in CSS (info, successo, attenzione, errore): a cosa serve
Genera i box che mettono in risalto un messaggio sul sito o sul blog: avviso di manutenzione, conferma d’ordine, scadenza di una promozione, errore nel modulo o un suggerimento in mezzo al testo. Scegli i tipi, tra quattro stili (bordo laterale, bordo intero, pieno e linea sottile), l’arrotondamento e se il box ha il pulsante di chiusura.
Ogni tipo ha un’icona e un titolo propri, per non dipendere solo dal colore, e i colori del testo hanno un buon contrasto con lo sfondo. La pagina di aiuto spiega quando usare role="alert" e role="status" per gli avvisi che compaiono dopo un’azione, come l’invio di un modulo.
Come si usa
- Seleziona i tipi di avviso.
- Scegli lo stile e il pulsante di chiusura.
- Copia l’HTML e il CSS.
Quando usarlo
- Avvisi di manutenzione o di promozione.
- Messaggi dei moduli.
- Suggerimenti e note negli articoli.
Domande frequenti
Qual è la differenza tra role="alert" e role="status"?
role="alert" fa annunciare l’avviso subito dallo screen reader, interrompendo ciò che stava leggendo, e serve per gli errori che compaiono dopo un’azione, come un modulo inviato con problemi. role="status" annuncia senza interrompere e serve per i successi. Gli avvisi già presenti nella pagina quando si apre non hanno bisogno di nessuno dei due, ed è così che li genera lo strumento.
Perché il colore non basta?
Chi non distingue il rosso dal verde, o usa il sito su uno schermo monocromatico, non percepisce la differenza solo dal colore. Per questo ogni tipo ha un’icona propria e un titolo, e i colori del testo hanno un contrasto sufficiente con lo sfondo.
Come mostrare l’avviso dopo l’invio di un modulo?
Lascia il box nell’HTML con l’attributo hidden e role="alert" (per gli errori) o role="status" (per i successi) e rimuovi hidden con JavaScript quando serve. Lo screen reader annuncia il testo nel momento in cui compare.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.