kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS


CSS-Sprites: Der perfekte Überblick

Als CSS-Sprites bezeichnet man eine CSS-Technik in der mehrere Grafiken (z.B. verschiedene Buttons und Zustände einer Navigation) in einer großen Grafik zusammengefasst werden. Im Idealfall alle Grafiken einer Seite, sofern dies möglich ist. Diese Technik bietet massive Vorteile die ich hier gar nicht alle aufzählen möchte.
Da ich mich in der Vergangenheit schon einige Male mit Webdesignern streiten (!) musste, die diese Technik als sinnlos oder zu kompliziert verurteilten, kommt jetzt hier der Link zum ultimativen Roundup zum Thema CSS-Sprites. Lesen, merken, anwenden!

CSS 3-Feature: Writing-Mode

Die westliche Leserichtung ist bekanntlich von links nach rechts und von oben nach unten. Insbesondere in asiatischen und arabischen Ländern wird hingegen oft von rechts nach links geschrieben und gelesen. Ebenso gibt es Kulturen in denen die Zeilen von oben nach unten verlaufen. CSS 3 ermöglich nun endlich diese Textdarstellung.
In diesem Beitrag beschreibe ich Funktionsweise und praktische Anwendung des CSS 3-Features "writing-mode".

Beitrag zu Ende lesen

Websites für das iPhone erstellen und optimieren

Das iPhone stellt das "echte" Internet dar, soviel wissen wir schon aus der Werbung. Doch es gibt auch diverse Websites die extra für das iPhone geschrieben oder zumindest optimiert wurden.
Experten und Web-Pioniere sind sich einig: Die Zukunft des Internets ist mobil. Höchste Zeit also sich mit diesem Thema auseinander zu setzen. In diesem Artikel erläutere ich einige Funktionen hinsichtlich des iPhones.

Beitrag zu Ende lesen

Einführung in CSS 3

Auf die offizielle Veröffentlichung von CSS 3 darf die Webdesign-Gemeinde wohl noch etwas warten. Kein Grund jedoch sich nicht einige der neuen Funktionen etwas genauer anzuschauen:
In diesem Artikel zeige ich anhand simpler Beispiele die CSS 3-Funktionen "rounded courners", "multiple backgrounds", "box-shadow", "text-shadow" und "multi-column-layout".

Beitrag zu Ende lesen

Simple CSS Mouse Over Image Gallery

Vor einigen Tagen brauchte ich eine simple Bildergalerie in der man mit der Maus über Miniaturansichten fährt und das entsprechende Bild in groß angezeigt bekommt. Auf der Suche nach einer entsprechenden Lösung fand ich jedoch leider nichts was mir wirklich zusagte. Zum einen wollte ich komplett auf JavaScript verzichten, zum anderen das Markup möglichst übersichtlich halten.
Im folgenden erläutere ich Euch die nun entwickelte Lösung.

Beitrag zu Ende lesen

Räumlichkeit und Bewegung mittels CSS

Bewegung und Räumlichkeit in Internetseiten beschränken sich heutzutage keinesfalls mehr auf Flash oder Javascript.
Mittels unterschiedlich positionierter Grafiken kann während der Skalierung des Browserfensters ein räumlicher, dreidimensionaler oder gar bewegter Eindruck entstehen.

Hier findet Ihr einige beeindruckende Beispiele für Räumlichkeit und Bewegung mittels Parallax (Linienrasterbild) und Background-Ausrichtung in CSS.

Beitrag zu Ende lesen