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.
<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.
<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


Similari
⋮ Python per tutti ⋮
218% Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
⋮ Selettori CSS definiti ⋮
93% Css ⊚
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
⋮ Fondamentali di jQuery ⋮
92% JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
⋮ La Top 10 dei comandi in CSS3 ⋮
63% Css ⊚
CSS3 sta davvero iniziando a prendere slancio con molti dei comandi descritti nel lavoro del progetto CSS3 supportato da Firefox, Safari e Google Chrome. Ho pensato di mettere insieme alcuni dei miei preferiti. [expand tit…
⋮ 25 Tricks in CSS da conoscere ⋮
61% Css ⊚
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …