Apfelkuh - think <div>erent

HTML und CSS: das Unliebsamste für jeden Web-Developer. Man wiederholt sich ständig, muss Margins, Paddings und Widths berechnen undsoweiterundsofort. Das ist nun alles Vergangenheit dank less-CSS, einem Gem für Ruby on Rails mit dem Man im CSS Variablen und Funktionen benutzen, Klassen in Klassen wiederverwenden und sogar mit diesen automatisch rechnen kann
(continue reading…)

Transparenz ist für viele Designer ein sehr wichtiges Gestaltungsmittel. Nur wie stellt man das im Browser an ohne Bilder benutzen zu müssen? Apfelkuh zeigt wie. (continue reading…)

Statt der Maßeinheit “px” gibt es im Webdesign zudem die Größe “em”. Em entspricht der Größe eines Gevierts(—), also der Schriftgröße. Diese ist entscheidend für das sogenannte “barrierefreie Webdesign”

Wenn der User nun mit Strg+ “+” oder dem Mausrad die Schriftgröße einstellt, so vergrößert sich alles, was mit “em” skaliert wurde proportional mit, was dafür sorgt, dass das Layout trotz großer Schriftgrößen der Clientseite richtig angezeigt wird

Da üblicherweise die Standard-Schriftgröße 12 pixel beträgt, ist es zuweil recht schwierig damit wirklich zu rechnen (50px wären in em angegeben dann 4.1666…em );

Um sich das rechnen zu ersparen gibt es einen einfachen Trick: Die Schriftgröße des gesamten Dokuments auf 10 Pixel (oder auch 62.5%) setzen. Somit beträgt das Geviert — oder auch m-dash oder em — nun 10 pixel und unsere 50px können als 5&rhinsp;em formatiert werden.

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…

(continue reading…)