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
Mostrare avvisi ed errori con jQuery UI
17% UI
Esiste una libreria molto interessate se si usa jQuery ch’è jQuery UI. L’insieme di queste librerie sono molto utili e facilitano il lavoro con l’HTML nella pagina web. Nel caso di jQuery UI, ci sono un buon numero di cont…
Selettori CSS definiti
16% 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…
25 Tricks in CSS da conoscere
14% 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. …
Creare URL corto utilizzando jQuery e Ajax
14% JQuery
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
Come cambiare il colore del testo selezionato
13% Css3
Sebbene questa dichiarazione CSS3 potrebbe non essere fondamentale per il vostro progetto o disegno e, anche se non è supportato da tutti i browser, si presenta come un effetto fantastico che da al progetto un’ulteriore sp…