CSS Flexbox lernen mit Flexbox Froggy

Flexbos Froggy Screenshot

Flexbox ist eine moderne Möglichkeit responsive und flexible Layouts zu erstellen. Dabei kann komplett auf Größenangaben und Werte wie position, float oder clear verzichtet werden. Hört sich einfach an, ist es aber nicht ;) Wenn man es einmal durchschaut hat, ist alles prima. Bis dahin kann es allerdings ein ziemlich ernüchternder Weg werden, da man wirklich noch einmal ganz von vorne beginnen muss. Vergleichbar ist das ganze vielleicht am ehesten mit dem Umstieg vom Table-Design hin zu Div-Containern.

weiterlesen

Landkarten als Font – Map Glyphs

Landkarten als Font

Wer den Blog schon länger verfolgt weiß durchaus, das ich mich sehr viel mit der Darstellung von Objekten auf Landkarten und Umkreissuchen beschäftige. Letztendlich ein schwieriges Thema weil auf die eine oder andere Art immer Copyrights Dritter beeinflusst werden, oder externe Dienste (Google Maps) verwendet oder eingebunden werden müssen. Problematisch wird es schon beim Einsatz einer einfachen Deutschland-Karte. Woher nehmen, und am besten ohne Kosten?

weiterlesen

Intention.js – Responsive direkt im HTML definieren

Screenshot von Intention.js

Je nach Einsatz von Responsive ist es normal, das man auch Bilder austauschen muss, oder Design-Elemente anpassen. Die Intention dahinter ist stets klar, das gleiche Bild, mehrere Formate. In der Regel ist dies recht einfach zu handhaben, komplex wird die Sache dann, wenn wir zum Beispiel über eine individuelle Webapp im Intranet sprechen, die einige tausend Seiten mit einigen tausend Bildern ausgibt. Man kommt nämlich hier sehr schnell in einen Bereich, in dem man Inline auf die Seite JavaScript setzt, und das ist weder schön, sondern auch nicht das was man semantisch korrekt nennen würde.

weiterlesen

Individuelle Checkboxen ohne JavaScript

Screenshot individueller Checkboxen in reinem CSS

Schuster bleib bei deinen Leisten ist nicht immer eine gute Idee! Vor allem dann, wenn man seine Stiefel anstatt gegen die Version aus Gummi auszutauschen weiterhin mit Schweinefett behandelt. In unserem speziellen Fall betrifft dies Checkboxen. Es ist nämlich nicht mehr nötig diese mit Javascript zu individualisieren, man kann dies auch durch reines CSS lösen.

weiterlesen

piCSSel-art – Lustige C64 Sprites in CSS

Screenshot des PiCSSel-Art Editors

Dieser ganze HTML5-Spiele-Hype erinnert mich in seinen Resultaten immer mehr an den C64. Immer mehr Klassiker kommen für iOs auf den Markt, ohne das man sich groß Mühe um Grafiken macht. Letztes prominente Beispiel diesbzgl. ist Transport Tycoon für das iPad. Grottige Grafik, geiles Spiel. Verbunden mit der ganzen Isometrie kommt nun auch wieder ein Pixel-Schubser-Hype auf. Für Icons kam man eh nicht dran vorbei, aber man kann immer mehr in Spielen die einfachen Grafiken verwenden. Ehrlich gesagt juckt es mir auch ganz gehörig in den Fingern mal Xcode anzuwerfen um zu sehen wie schnell man zu einem Ergebnis kommt.

weiterlesen