Was der Zen Garden für das Ausprobieren der Möglichkeiten von CSS-Designs für Webseiten ist, soll wohl der Form Garden für das Styling von HTML-Formularen sein oder werden. Noch gibt es nicht allzu viele verschiedene Designs zur Auswahl, aber hey, dafür darf ja auch jeder noch mitmachen und sein eigenes Stylesheet einsenden.
Eine ausführliche Einführung in die Gestaltung von Schrift und Text mit CSS. Von der Festlegung der Grundschriftart für eine Webseite bis zur Textdarstellung bildet dieser Artikel einen guten Startpunkt für Entwickler, die noch nicht mit allen CSS-Feinheiten vertraut sind.
Kaum noch eine Website, die ohne sie auskommt: Farbverläufe in Hintergrundgrafiken. Wer Zeit sparen und diese nicht immer neu mit dem Grafikprogramm der Wahl erstellen möchte, findet bei A List Apart eine Methode, diese (fast) nur mit CSS und (X)HTML zu erzeugen. Bereits angekündigt ist ein zweiter Artikel, der dann erklären soll, wie diese Technik in der Praxis beim Erstellen von vollständigen Weblayouts genutzt werden kann.
Yahoo! hat eine neue Version seiner User Interface Library für JavaScript veröffentlicht. In einem Beitrag auf dem YUI Blog schreibt Eric Miraglia über die enthaltenen Neuerungen:
Die Versionsnummer 0.12 zeigt, dass die YUI Library noch lange nicht “fertig” ist, aber sie ist bereits jetzt eine stabile und äußerst nützliche JavaScript-Bibliothek, die ihre Einsatzfähigkeit in vielen Projekten gezeigt hat. Es bleibt spannend zu sehen, was den Yahoo!-Jungs noch so einfällt für die kommenden Versionen.
In der Layout Gala wird gezeigt, wie man aus dem gleichen, einfachen HTML-Markup nur mit Hilfe von CSS vierzig verschiedene Layouts machen kann. Die Demo-Webseite besteht aus fünf verschiedenen Bereichen (Kopf, Inhalt, Navigation, Extra, Fuß), die auf immer neue Weise angeordnet werden.
Zur Positionierung der Elemente werden floats und in den meisten Fällen negative Ränder verwendet und kommen ohne Hacks aus. Alle Layouts funktionieren in IE 5-7, Firefox 1.5, Opera 8.5 sowie Safari 2 und können entweder online betrachtet oder als Zip heruntergeladen werden.
(via CSS Beauty)
enlightendesigns stellt ein Tutorial zur Verfügung, das eine Schritt-für-Schritt-Anleitung zur Erstellung einer Website mit CSS-Layout für alle bietet, die zwar eine Grundverständnis für CSS haben, jedoch noch nicht viel (oder keine) praktische Erfahrung damit sammeln konnten.
Tabs zur Navigation sind schon lange beliebt und werden es wohl auch noch eine Zeit bleiben. Statt mit Tabellen werden sie heute allerdings mit CSS realisiert, und einige nette Beispiele stellt der exploding boy zur Verfügung (hier und hier).
Außerdem hat er auch noch 14 Beispiele für vertikale CSS-Menüs erstellt. Alles zur freien Verwendung.
(via CSSHilfe)
Überschneiden sich mehrere Elemente einer Webseite in der Darstellung, dann gibt die Reihenfolge im HTML-Quelltext an, welches “oben” liegt. Das erste liegt unten, das nächste darüber usw.
Aber das muß nicht so sein, denn per CSS läßt sich der z-index festlegen, der die “Höhe” über der Seite, quasi die dritte Achse neben horizontal und vertikal, angibt. Einen Einblick in die Verwendung gibt Andy Clark auf 24ways und erklärt ihn für alles andere als tot!
Die Website des UX Magazine ist ein schönes Beispiel für ein gelungenes CSS-basiertes Design, wie ich finde. Viel Inhalt, aber trotzdem übersichtlich und nett anzuschauen. Und das Thema ist auch noch interessant, es dreht sich alles rund um “User Experience”.
Die Site befindet sich zur Zeit noch im Beta-Stadium, wie dort angemerkt wird. Interessant, kannte ich bisher eher nur von Webanwendungen.
Das Buch “CSS Mastery” von Andy Butt, Cameron Moll und Simon Collison wird auf einfach persönlich vorgestellt und bekommt viel Lob von Jörg .
Wer vertieft in die Materie des CSS-basierten Webdesigns einsteigen oder seine Fähigkeiten weiter verbessern möchte, sollte sich das Buch also anschauen. Online gibt es ein Probekapitel (PDF) beim Verlag.
