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
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>
<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>
Se volete, salvate le immagini per usarli localmente dal vostro server e modificate l’url dell’icona. Comunque funziona anche così.
Live Demo
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…
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…

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…
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…
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. …
Aggiungi un commento