Avvisi W3.CSS
La classe w3-panel è la classe perfetta per visualizzare tutti i tipi di avvisi:
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Gli avvisi vengono spesso visualizzati utilizzando un colore forte:
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Esempio
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Visualizza avvisi
Avvertimento!
Il giallo indica spesso un avviso che potrebbe richiedere attenzione.
Avvertimento!
Il giallo indica spesso un avviso che potrebbe richiedere attenzione.
Esempio
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Visualizza successi
Successo!
Il verde indica spesso qualcosa di positivo o di successo.
Successo!
Il verde indica spesso qualcosa di positivo o di successo.
Esempio
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Visualizza informazioni
Informazioni!
Il blu indica spesso un cambiamento o un'azione informativa neutra.
Informazioni!
Il blu indica spesso un cambiamento o un'azione informativa neutra.
Esempio
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Utilizzo di un contenitore
La classe w3-container può essere utilizzata anche per visualizzare gli avvisi:
Esempio
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Avvisi in tutti i colori
Gli avvisi vengono spesso visualizzati con colori speciali, ma è possibile utilizzare qualsiasi colore:
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Esempio
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Avvisi di chiusura
Per chiudere la finestra di avviso, fare clic sulla X nell'angolo in alto a destra:
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Per creare la X che chiude l'avviso, aggiungi un elemento <span> con il pulsante di classe w3 e un evento onclick :
Esempio
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Suggerimento: l'HTML × entità è l'icona preferita per i pulsanti di chiusura (anziché la lettera "X").
Avvisi arrotondati
Usa le classi w3-round se vuoi angoli arrotondati:
Successo!
Qui viene utilizzato w3-round.
Successo!
Qui viene utilizzato w3-round-large.
Successo!
Qui viene utilizzato w3-round-xxlarge.
Esempio
<div class="w3-panel w3-green w3-round">
Avviso come una carta
Utilizzare una classe w3-card se si desidera visualizzare l'avviso come una carta:
Avvertimento!
Il giallo spesso indica qualcosa che richiede attenzione.
Esempio
<div class="w3-panel w3-yellow w3-card-4">