Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succedendo.

Tips & Tricks

⤽
Per primo daremo a tutti i box le stesse caratteristiche come dimensione, bordo e altre configurazioni comuni. In questo modo eviteremo di scriverlo per ogni selettore.
Poi per ogni particolare box, definiamo le sue particolarità come lo sfondo, il colore del testo e l’icona che la rappresenta.
Copia codice 

<style type="text/css">
.info, .success, .warning, .error {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px;
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.info {
    color: #00529B;
    background: #BDE5F8 url('../iconinfo.png') no-repeat 10px center;
}
.success {
    color: #4F8A10;
    background: #DFF2BF url(../icontick.png') no-repeat 10px center;
}
.warning {
    color: #9F6000;
    background: #FEEFB3 url('../iconwarning.png') no-repeat 10px center;
}
.error {
    color: #D8000C;
    background: #FFBABA url('..	/iconcross.png') no-repeat 10px center;
}
</style>
Di seguito useremo il codice HTML a seconda dell’informazione opportuna.
Copia codice 

<div class="info">Messaggio di informazione</div>
<div class="success">Messaggio di successo</div>
<div class="warning">Messaggio di avvertimento</div>
<div class="error">Messaggio di errore</div>
Ecco il risultato.

Messaggio di informazione
Messaggio di successo
Messaggio di avvertimento
Messaggio di errore

Se volete, salvate le immagini per usarli localmente dal vostro server e modificate l’url dell’icona. Comunque funziona anche così.
Live Demo