CSS Grids lernen mit Grid Garden

CSS Grid Garden

Es ist ja noch gar nicht so lange her das ich über Flexbox Froggy berichtet habe. Mit dem Spiel kann man einfach und schnell den Umgang mit Flexboxen erlernen. Es gibt nun ein recht ähnliches Spiel, das sich aber mit CSS Grids beschäftigt. Eine kurze Einführung in das Thema CSS Grid Layout findet ihr hier. weiterlesen

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