Schöne und valide CSS Info-Klassen

18 Feb

von Manuel Graf am 18.Feb 2009, in der Kategorie Design

Inspiriert von BinaryBonsai habe ich versucht für einige wichtige Informationen wie Alarme, Bestätigungen, oder anderes valide CSS-Klassen zu schreiben.

benötigt wird hierfür – wieder einmal – das Silk Icon Set von famfamfam.com

je nach Helligkeit des Designs der eigenen Seite muss man eventuell die Farbe leicht nachjustieren, aber im großen und ganzen sind sie eher auf helle Designs ausgelegt.

Die Klassen funktionieren sehr simpel. Durch die Unterstützung des Icons und die jeweilige Farbassoziation entsteht momentan der richtige Eindruck von dem was gerade passiert ist. Ob nun…

Das Laden der Seite einen Fehler produziert hat (ERRORCODE: 0001337 – Das Angeforderte Dokument wurde vom Administrator für die öffentliche Einsicht blockiert)

HTML: <div class=”alert”> Text </div>

oder

Man doch bitte Javascript im Browser aktivieren möge, um die Seite in vollem Umfang nutzen zu können. (Hierzu am besten in der Firefox/Safari/Internet-Explorer-Hilfe nachsehen oder ein Noscript-Plugin herunterladen)

HTML: <div class=”info”> Text </div>

oder

Das Profilbild xyz.jpg erfolgreich hochgeladen und zum mit dem Userprofil verknüpft wurde.

HTML: <div class=”accept”> Text </div>

Fazit: Meiner Meinung nach für die Übersichtlichkeit und Usability einer Seite nahezu unverzichtbar, gerade wenn man viel User-generated Content hat – also viele Formulare, Uploads und Editierungsmöglichkeiten.

Über Manuel Graf

Manuel Graf ist Mediengestalter für Digital- und Printmedien bei iBusiness.de. Er arbeitet seit 6 Jahren mit Photoshop, HTML und CSS und hat sich seit 2 Jahren Kentnisse in Sprachen wie Javascript, Actionscript 3.0, BOIL, PHP, Ruby oder Python angeeignet.

Kommentare