De naam Event Messages verzin ik, want er bestaat volgens mij nog geen term voor de berichten welke de gebruiker informeren tijdens het invullen van een formulier e.d.
Categoriën
De informatie heeft een bepaalde categorie, namelijk:
- Fout;
- Succesvol;
- Informatie;
- Waarschuwing;
- Opmerking.
Kleuren
We ervaren rood als gevaar, en groen als veilig.
De keuze van de kleuren voor de Event Messages zijn dus belangrijk en zorgvuldig uitgekozen:
| Categorie | Kleur 1 | Kleur 2 |
|---|---|---|
| Fout | #AE432E | #F2D4CE |
| Succesvol | #77AB13 | #D9E6C3 |
| Informatie | #058DC7 | #CEE6F2 |
| Waarschuwing | #E6C26E | #FAF6D4 |
| Opmerking | #BFBFBF | #F2F2F2 |
Iconen
Voor de icons maken we gebruik van famfamfam.com: Silk Icons.
| Categorie | Bestandsnaam | Icon |
|---|---|---|
| Fout | delete.png |  |
| Succesvol | tick.png |  |
| Informatie | information.png |  |
| Waarschuwing | error.png |  |
| Opmerking | lightbulb.png |  |
HTML
<body> <div class="event-message event-message-error"> <div class="icon icon-error"></div> <div class="header">Fout</div> <div class="text">Er is een fout opgetreden.</div> </div> <div class="event-message event-message-success"> <div class="icon icon-success"></div> <div class="header">Succesvol</div> <div class="text">De wijzigingen zijn succesvol opgeslagen.</div> </div> <div class="event-message event-message-information"> <div class="icon icon-information"></div> <div class="header">Informatie</div> <div class="text">Aan deze informatie kunnen geen rechten worden ontleend.</div> </div> <div class="event-message event-message-warning"> <div class="icon icon-warning"></div> <div class="header">Waarschuwing</div> <div class="text">U dient akkoord te gaan met de algemene voorwaarden.</div> </div> <div class="event-message event-message-comment"> <div class="icon icon-comment"></div> <div class="header">Opmerking</div> <div class="text">Alle genoemde prijzen zijn exclusief BTW (19%).</div> </div> </body>
CSS
body {
font-family: "Lucida Grande", "Lucida Sans Unicode";
}
/* Icons */
.icon {
float: left;
position: relative;
top: 2px;
margin-right: 5px;
width: 16px;
height: 16px;
}
.icon-error { background-image: url('icons/delete.png'); }
.icon-success { background-image: url('icons/tick.png'); }
.icon-information { background-image: url('icons/information.png'); }
.icon-warning { background-image: url('icons/error.png'); }
.icon-comment { background-image: url('icons/lightbulb.png'); }
/* Event Message */
.event-message {
margin-bottom: 10px;
padding: 5px;
}
.event-message .header {
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
}
.event-message .text {
margin-left: 21px;
font-size: 12px;
color: #000;
}
/* Fout */
.event-message-error {
background-color: #F2D4CE;
border: 1px solid #AE432E;
}
.event-message-error .header {
color: #AE432E;
}
/* Succesvol */
.event-message-success {
background-color: #D9E6C3;
border: 1px solid #77AB13;
}
.event-message-success .header {
color: #77AB13;
}
/* Informatie */
.event-message-information {
background-color: #CEE6F2;
border: 1px solid #058DC7;
}
.event-message-information .header {
color: #058DC7;
}
/* Waarschuwing */
.event-message-warning {
background-color: #FAF6D4;
border: 1px solid #E6C26E;
}
.event-message-warning .header {
color: #E6C26E;
}
/* Opmerking */
.event-message-comment {
background-color: #F2F2F2;
border: 1px solid #BFBFBF;
}
.event-message-comment .header {
color: #BFBFBF;
}