CSS Flashmessage styling
Oktober 19, 2008 | Kommentieren
Auf fast jeder Seite wird man früher oder später einer grünen Success- oder einer roten Errormessage begegnen. In diesem kurzem Tutorial werde ich erklären wie man eine Flashmessage wie diese hier erstellt:
Das HTML dafür ist ein einfaches DIV mit einer CSS-Klasse.
<div class="error_message">Rote Flashmessage!</div> <div class="success_message">Grüne Flashmessage!</div>
Im CSS wird zuerst die Text-, Border- und Backgroundfarbe definiert. Dem “background” wird noch ein Hintergrundbild hinzugefügt welches links 8px und oben 4px abstand hat. Dann kommt noch ein innerer “padding” und ein äusserer “margin-bottom”.
.error_message { background: #FFBABA url(error_icn.png) no-repeat 8px 4px; border: 1px solid #CB2026; color: #CB2026; margin: 0 0 20px 0; padding: 10px 10px 10px 40px; } .success_message { background: #DFF2BF url(success_icn.png) no-repeat 8px 4px; border: 1px solid #359545; color: #359545; margin: 0 0 20px 0; padding: 10px 10px 10px 40px; }
