Webdesign

CSS

Cascading Stylesheets sind eine der wichtigsten Komponenten heutiger und zukünftiger Websites. Ihr Potential ist enorm und im Web kann man einiges darüber lernen.
Ob Sie sich in die Grundlagen von CSS einlesen möchten oder eine komplette Site mit CSS-Layout entwerfen und auch die Navigation mit Stylesheets gestalten wollen – hier finden Sie jede Menge Ressourcen rund um Cascading Style Sheets.

Infosammlungen und Linklisten

Essential Bookmarks for Web-Developers
Vitaly Friedmann hat eine beispiellose Sammlung von Webdesign Ressourcen zusammengestellt, die ständig erweitert wird und nach Kategorien geordnet ist. Es finden sich z.B. Links zu CSS-Sites, zu Farbtools, Webdesign Magazinen und andere mehr. Außerdem gibt es mit dem Webdeveloper Handbook eine Version, die sich auch auf mobilen Geräten nutzen lässt.
Stil mit <stil>
Die Begleitseite zu einem CSS-Buch hat einiges zu bieten: eine CSS- und eine XHTML-Referenz, Tipps zum Design mit CSS, Hinweise auf nützliche Programme und anderes mehr. Ein Besuch lohnt sich!
Toms Stichpunkte: CSS-Tipps
Thomas Stich hat eine nette kleine Sammlung verschiedener Tipps und Tricks zu CSS und Browsern zusammengestellt, die man sich auf jeden Fall mal angesehen haben sollte.
CSS Panic Guide
Sammlung von Links zu vielen weiteren CSS-Ressourcen im Web
CSS Pointers Group
Informationsreiche Seite, die z.B. verschiedene Bugs in den Browsern erklärt (mit Workarounds), Tutorials bereithält und auf viele weitere Ressourcen im Web hinweist.
House of Style
Umfassende Informationen über CSS: der CSS Guide informiert über die Hintegründe und erklärt, warum CSS so wertvoll ist. Tutorials erklären grundledende Anwendungen, und einige kostenlose Kurse geben weitere Hinweise. Die Firma macht zwischendurch immer wieder mal Werbung für ihre kommerziellen Produkte, so dass man etwas nach den kostenlosen Inhalten forschen muss. Was man findet, lohnt das Suchen aber durchaus.
Artikel von Eric Meyer
Artikelsammlung des Mannes, der aktuell wohl der kompetenteste Experte in Sachen CSS ist. Man ist immer wieder erstaunt, welche Ideen er hat und wie elegant er sie in CSS umsetzt. Absolut lohnenswert.
CSS Frequently Asked Questions
FAQ der HTML Writers Guild, in denen grundlegende Fragen beantwortet werden.
The Fixor
The Fixor listet unzählige Internetquellen rund um CSS auf: Examples, Resources, Tutorials… Insgesamt hunderte von Links.
CSS Technik
Eine sehr übersichtliche und umfangreiche Seite, die allerlei Ressourcen und Infos zu CSS bereithält. Neben Tutorials gibt es Links und fertige Snippets für bestimmte Lösungen. Ansehen!
CSS 4 You
Wenn man gerade in CSS einsteigen möchte, ist CSS 4 You genau das Richtige! Und auch für erfahrener Leute gibt es noch was zu lernen. Z.B. wie man mit Conditional Comments bestimmte IE Versionen gezielt anspricht. Sehr empehlenswerte Seite!
CSS Spickzettel
Bei der Arbeit mit Style Sheets gibt es viele kleinere und größere Punkte zu beachten, wenn alles glatt gehen soll. Häufig müht man sich mit Problemchen, die leicht vermeidbar sind. Dieser Spickzettel listet viele solcher Punkte auf, so dass man sich ihrer schon im voraus bewusst wird. Das Original stammt von Dave Shea, die Übersetzung hat Peter Bergner von CSS-Technik übernommen.
nach oben

Tutorials

Liquid Corners - skalierbare runde Ecken
Dieses gut aufgebaute Tutorial zeigt (ähnlich wie mein Tutorial), wie man skalierbare Boxen mit verschiedenen grafisch gestalteten Rahmen und Ecken erstellen kann.
Sliding Doors
Ein neuer ALA Artikel, der eine recht neue (Stand Oktober 2003) und sehr mächtige Möglichkeit der visuellen Gestaltung mit Hintergrundbildern vorstellt. Die Idee ist, wie so oft, geradezu genial einfach, so dass man sich wundert, wieso man nicht selbst darauf gekommen ist.
Button mit Wachstumseffekt
Ein Tutorial, das erklärt, wie man beim Überfahren von Links mit der Maus zusätzliche Inhalte anzeigen lassen kann. Bis hin dazu, dass der ganz Button sich vergrößert und eine ausführliche Beschreibung preisgibt.
Inline Formatting Model
Wie wirken sich padding, margin, line-height, font-size etc. aus bzw. wie sollten sie sich gemäß der Standards auswirken? Eric Meyer erklärt es hier. Nicht gerade leichte Kost, für Fortgeschrittene aber durchaus wichtig.
Boxes and Problems
Eine Beschreibung von Problemen und Lösungen, die sich mit dem Einsatz von CSS-posisionierten Boxen (divs) ergeben können.
A Webdesigner's Journey
Versuchen Sie gerade, ein vorhandenes Tabellenlayout in CSS zu überführen? Nicht ganz einfach, oder? Jeff Zeldman hat das mit seiner exzellenten Seite A List Apart ebenfalls gemerkt und berichtet über Fallstricke und wie man sie umgeht. Tip: die Archive von ALA (rechts unter “Hot Topics”) sind jederzeit einen intensiven Blick wert!
CSS Basics
Schöne Sammlung von Tutorials, Links und Buchtipps zum CSS Einstieg und darüber hinaus. Alles wichtige wird in knapper und anschaulicher Form vorgestellt, also nichts wie hin.
Selectutorial
Maxdesign hat uns schon List-a-matic und andere Sahnestückchen beschert. Nun gibt es ein Tutorial über die verschiedenen CSS-Selektoren und ihre Anwendung. Alles in gewohnt brillanter Qualität.
Link Specifity
Funktionieren die schön mit CSS gestalteten Links nicht? Irgendwie machen die Browser was sie wollen, wenn ein Link besucht ist oder man mit der Maus darüber fährt? Das liegt möglicherweise an der falschen Reihenfolge der Styleangaben. Eric Meyer erlärt in diesem kleinen Tutorial, wie es richtig geht.
nach oben

Seitenlayouts mit CSS

CSS-Layouts zum Kopieren
Thomas Stich hat eine Reihe verschiedener CSS-Layouts erstellt, die man sich kopieren kann. Praktisch!
Seitenlayouts zum Mitnehmen
Jan Heinicke bietet verschiedene CSS-Layouts zum Kopieren an. Sehr praktisch. Seine CSS-Site Fractaculum hat auch noch andere Leckerbissen zu CSS zu bieten.
RuthsarianLayouts
Eine weiter Site, die fertige CSS-Layouts anbietet. Eine große Hilfe, wenn man nicht alles von Grund auf selbst erstellen möchte.
Ein CSS Layout erstellen
Andrew Krespanis erklärt Schritt für Schritt, wie man ein CSS-Layout “in einer Stunde” erstellt. Das Tutorial ist als S5-Präsentation erstellt und kann somit seitenweise gelesen werden. Übrigens gibt er hier bei andreas-kalt.de ebenfalls ein Tutorial zum Thema CSS-Layouts.
How to center?
Elemente mittig auf einer Seite oder in anderen Elementen auszurichten ist nicht immer intuitiv machbar in CSS. Hier werden zwei Möglichkeiten aufgezeigt, und zwar mit margin: auto und mit negativem margin. Methode 1 Methode 2
3-column complex layout
Darfs etwas komplizierter sein? Hier ist eine Vorlage, mit der man wahrscheinlich auch jedes größere Projekt gestalten kann. Alles per CSS, keine Tabellen. Ein Blick in das Stylesheet öffnet die Augen!
Real World Style - Layouts & Tips
Kleine Sammlung wertvoller Tips, wie man Seitenlayouts mit CSS realisiert.
The Layout Reservoir
Der Name sagt es: ein kleines Reservoir funktionierende CSS Layouts zum Abkucken und weiterverwenden. Nichts Komplexes, aber dennoch schlicht, schön und nützlich.
Advanced CSS Layout
Möchten Sie lieber Ihr eigenes Layout basteln als die vorgestellten Vorlagen zu verwenden? Dieses Tutorial erklärt, worauf man achten muss.
Layout-o-matic
Hervorragendes Tool, das auf Knopfdruck das CSS für Seitenlayouts erzeugt. Man kann verschiedene Layoutvarianten wählen und das Ergebnis dann als html-Datei herunterladen oder zuerst ansehen. Das ganze funktioniert browserübergreifend und berücksichtig auf Wunsch sogar noch die Unfähigkeit des armen kleinen IE 5.x.
CSS Layout Creator
Eine sehr gute Seite, auf der man sich ein CSS Layout zusammelklicken kann. Einzelne Angaben für die genaue Seitenaufteilung und die Hintergrundfarben sowie für den DOCTYPE der HTML-Datei sind möglich. Allerdings lassen sich die einzelnen Bereiche nur in Pixeln und nicht relativ angeben.
Glish.com
Eine nüchterne aber sehr wertvolle Seite mit fertigen CSS Layouts zum Kopieren und Verwenden. Dabei gibt es keine bösen Überraschungen: die Layouts sind in verschiedensten Browsern getestet. Außerdem gibt es noch eine Seite zu CSS Hacks, sprich: Tricks, wie man mit bekannten Problemem fertig wird.
CSS Layout Tutorial
Ein hervorragendes Tutorial darüber, wie man mit CSS eine Site von grundauf layoutet. Russel Weakly von Maxdesign erklärt alles Schritt für Schritt anhand einer Beispielseite. Alles logisch aufgebaut und leicht mitzumachen. Auch für weniger erfahrene Webdesigner geeignet. Die deutsche Übersetzung gibt es übrigens gleich hier.
Why use CSS layout?
Eine sehr ansprechende, unterhaltsame und witzige Zusammenstellung von Gründen, warum man von Tabellen auf CSS Layout umsteigen sollte.
nach oben
Menü-Generator
Diese Site bietet eine “Maschine” zur Herstellung von listen-basierten Navigationsmenüs. Na wenn das nichts ist.
CSS Rolloverer
in Tool, das Rollover Effekte mit CSS erzeugt, ohne dass Grafiken nachgeladen werden müssen. Dazu muss man die verschiedenen Grafiken in eine kombinieren, die dann je nach Linkzustand verschoben wird, so dass nur der relevante Teil sichtbar ist. Klingt kompliziert? Einfach mal ansehen oder das Tutorial von SimpleBits durcharbeiten.
List-a-matic
Mit einer simplen Liste unzählige Navigationsmenüs bauen? Mit CSS kein Problem. Aber warum Listen als Navigation? Damit ältere Browser, PDAs und ScreenReader auch eine vernünftige Darstellung bekommen. Hier ist eine große Sammlung verschiedener Lösungen sowie ein “Automat”, mit dem man seine Individuelle Navigation erzeugen lassen kann. Dazu gibt es: ein Listentutorial und ein Turotial über das Element float. Und obendrein noch eine Übersicht, welche der gezeigten Lösungen in welchen Browsern funktionieren. Alles in allem ist diese Seite eine Truhe voller Schätze.
nach oben

Verschiedene CSS Beispiele

CSS Vault
Die bekannteste und renommierteste Sammlung von schönen CSS Sites im Netz. Wenn man Inspiration sucht, ist CSS Vault die richtige Adresse.
Stylegala
Schöne Site, die regelmäßig gutes CSS Design vorstellt. Es ist immer wieder inspirierend zu sehen, was mit CSS alles möglich ist.
CSS Workshop
Kleine Sammlung von Beispielen. Vor allem die abgerundeten Ecken sind interessant und der Hinweis auf die Verwendung der acronym und abbr Tags.
CSS Border Demo
Ein Demo, nur mit CSS border gemacht. Nicht für die praktische Anwendung, sondern zum Ansehen mit offenem Mund in stiller Bewunderung.
Pushing CSS to the Limits
Eine weitere Beispielseite für verschiedene, eher spezielle CSS Tricks. Das Interessante an dieser Seite sind die Links zu zahlreichen anderen Ressourcen.
CSS Design Ideas
Wiederum eine kleine Zusammenstellung von Ideen, wie man z.B. eine Navigationsleiste mit CSS gestaltet oder “stachelige Boxen” erstellt.
Position is everything
Eine Zusammenstellung von Fehlern, die heutige Browser beim Interpretieren von CSS machen. Zu wissen, dass es sich bei einem Layoutproblem um einen bekannten Bug handelt, kann manches Haareraufen und Rumprobieren ersparen. Also: Know your Bugs!
Skalierbare Box für alle Gelegenheiten
Nach der Lektüre von Douglas Bowmans ALA Artikel Sliding Doors of CSS kam mir die Idee, das Prinzip auf eine div-Box anzuwenden. Diese kann mit allen erdenklichen Effekten gestaltet werden. Ich habe der Box hier mal beispielhaft ein etwas dreidimensionales Design mit runden Ecken gegeben.
Rounded Corners
Boxen mit abgerundeten Ecken? Auch mit CSS kein Problem. Diese Seite zeigt, wie’s geht.
Info on Borders
Kurzes Tutorial zur Darstellung des border Elements in CSS und was man damit so alles anstellen kann.
vertical align: middle
Beispiele dafür, wie man Inhalte vertikal zentrieren kann. Das ist mit CSS leider gar nicht so einfach, wie man zunächst denken könnte. Das Element”vertical-align” funktioniert nämlich nur in Tabellenzellen richtig. Hier gibts Lösungen, wie es doch geht.
CSS Examples
Eine bunte Sammlung von Beispielen, wie man bestimmte häufig benötigte Layoutelemente mit CSS realisiert. Z.B. “Multi-column list” oder “Equally-spaced boxes”. Auch php und JavaScript Beispiele sind dabei.
SimpleBits Tips
Einige kleine aber schöne Beispiele für praktische CSS Anwendungen. Z.B. Icons für Überschriften mit background-image realisieren, anstatt ein <img>-Tag in HTML einzufügen. Oder eine schöne Navigationsleiste mit Hover-Effekt.
CSS/edge
Und noch mal Eric Meyer. Diese Seite ist nicht als Tutorial gedacht, sondern als eine Demonstration der Möglichkeiten von CSS. Sie öffnet die Augen dafür, dass man mit CSS und XHTML einiges mehr machen kann, als nur Links ohne Unterstreichung zu realisieren oder die Hintergrundfarbe von Tabellen festzulegen. Ansehen – allerdings nicht mit dem Internet Explorer, der verteht nämlich die meisten dieser fortgeschrittenen CSS-Elemente nicht!
A List Apart: Alternative Style Sheets
Noch ein Artikel über die Verwendung von alternativen Stylesheets für eine Seite.
Style Switcher
Ein Artikel über den Einsatz eines Styleswitchers (mit Code zum download) Damit kann man zwischen verschiedenen CSS-Designs umschalten, während das HTML Dokument identisch bleibt. Besonders eindrucksvoll kann man das Potential dieser Technik bei Zen Garden erleben.
eWorkers Workshops
Schöne Seite, die sich in der Hauptsache dem barrierefreien Webdesign verschrieben hat. Da CSS dafür unabdingbar ist, gibt es jede Menge schöner Beispiele dazu.
Fractaculum
Sehr schöne und informationsreiche Seite zu CSS. Der Autor Jan Heinicke hat eine respekatble Anzahl von Beispielen und Tutorials erstellt, wie man CSS gewinnbringend und browserübergreifend einsetzen kann. Mit seiner eigenen Seite hat er ein meisterliches Beispiel vorgelegt.
Zen Garden
Wenn Sie glauben, die Möglichkeiten von CSS zu kennen, sollten Sie Zen Garden besuchen. Ein und derselbe HTML-Code wird allein durch verschiedene Stylesheets in unglaublich vielfältige Websites verwandelt. Inspirierend!
nach oben

Typographie mit CSS

Schöne Überschriften in Webseiten
sIFR (Scalable Inman Flash Replacement) ist keine CSS Technik, aber sie lässt sich anstatt CSS-basierter Image Replacement Techniken einsetzen. Der Vorteil von sIFR ist, dass man jede beliebige Schriftart für Überschriften verwenden kann. Die Überschriften werden als Flash-Filme in die Seite eingebettet. Eine ausführliche Erklärung gibt es auf der Projektseite.
Image Replacement Techniken
Dave Shea gibt einen aktuellen Überblick über die verschiedenen Möglichkeiten, Text durch Grafiken zu ersetzen. Jede Technik hat ihre Vor- und Nachteile, die ausführlich besprochen werden.
Schriftarten im Web
Eine Sammlung von Screenshots zu den wichtigsten Schriftarten und wie sie in den einzelnen Browsern auf Windows und Mac angezeigt werden.
Optimale Zeilenlänge für den IE
Der Vorschlag von maxdesign beinhaltet die Verwendung der CSS-Eigenschaft max-width. Der IE unterstützt diese Eigenschaft aber nicht. Sven Tofte hat sich was ausgedacht, wie man auch IE-Nutzern zu einer optimalen Zeilenlänge verhelfen kann.
Optimale Zeilenlänge mit ems
Um optimale Lesbarkeit zu gewährleisten, sollten Zeilen eine bestimmte Länge nicht überschreiten. Im Webdesign gibt es Probleme, wenn man versucht, eine feste Breite festzulegen, da der Nutzer unterschiedliche Schriftgrößen verwenden kann. Bei maxdesign gibt es einen guten Artikel, der eine Lösung parat hat.
Was machen Browser mit Schriftgrößen?
Es ist zwar schön, die Probleme der Browser theoretisch zu kennen. Aber schöner ist es, sie als Bild vor Augen zu haben. Hier gibt es zum Schriftgrößenproblem eine Beschreibung sowie unzählige Screenshots von unterschiedlichen Browsern.
nach oben

Austausch und Diskussion über CSS

CSS Discuss Wiki
Das Wiki zu CSS Discuss. “Among other things the wiki serves as a collective long term memory for the list participants.”
CSS Discuss
DIE Liste. Eric Meyer ist der Moderator. Mehr muss man nicht sagen. Hier passierts!
CSS Design
Homepage der CSS Design Mailingliste. Eine sehr kompetente und lebhafte eMail-Liste zu CSS. Auf Deutsch gibt es kaum eine Alternative, wenn man auf ein konkretes Problem eine Antwort sucht.
CSS Technik News
Das Weblog von CSS Technik. Lebhafte Community zu CSS, in der es immer mal wieder Neuigkeiten gibt, die man sonst nur in englischsprachigen Newsgroups oder Foren erfährt.
nach oben

CSS Filter und Hacks

Star 7 Hack
Noch ein Hack: diesmal kann man CSS Code u.a. vor Mac OS X: Opera 6, UNIX: Konqueror 3, Windows: Internet Explorer 5, Windows: Opera 5, Opera 6 und Opera 7 verstecken. Aber vorsicht: das CSS validiert hinterher nicht mehr.
Commented Bachslash Hack
Eine Möglichkeit, CSS Code spezifisch vor dem IE5/Mac zu verstecken.
High Pass Filter
Und hier die Version für IE5/Mac und höher, IE6/Windows und höher, Netscape 6 und höher sowie Opera 5 und höher.
Mid Pass Filter
ier ein Filter, der CSS gezielt nur vor dem IE 5.x verbirgt. Alle anderen, ältere wie neuere, erhalten den Stylesheet.
Box Model Hack / Voice Family Hack
Tantek Çelik hat verschiedene Filter entwickelt, wie man CSS vor den IE in verschiedenen Versionen verbergen kann. Dieser mittlerweile berühmte Filter korrigiert im IE5 die fehlerhafte Interpretation des sogenanten Box Models. Das ist die Spezifikation, wie Ränder, Padding und Rahmen auf Inhalte angewandt werden.
Centricle CSS Filter
Wie kann man bestimmte CSS Elemente vor unfähigen Browsern verstecken? Diese Seite listet verschiedene Möglichkeiten auf, die darauf beruhen, dass bestimmte Syntaxelemente von älteren oder fehlerhaften Browsern ignoriert werden. Die Filter werden ausführlich erklärt.
Tricking Browsers into Hiding Styles
Gute Übersicht über die wichtigsten Methoden, wie man CSS vor älteren Browsern verbergen kann. Von der Begleitseite zu Eric Meyers Buch On CSS.
Dithered: CSS Filters and Hacks
Inzwischen wurden unzählige verschiedene Möglichkeiten gefunden, CSS vor unfähigen oder fehlerhaften Browsern zu verstecken. Diese Site listet einen Großteil dieser Filter auf und schließt auch JavaScript- und (bald) HTML-basierte Ansätze ein.
Conditional Comments
Mit Conditional Comments lässt sich beliebiger HTML-Code und damit auch ein Verweis auf das Stylesheet gezielt an einzelne Versionen des Internet Explorer richten. Die Comments werden von andern Browsern ingoriert und sind eine sehr elegante Art, die Macken der verschiedenen IEs auszubügeln ohne irgendwelche Hacks verwenden zu müssen. CSS4You erklärt, wies gemacht wird.
nach oben

Referenz- und Browsertestseiten

CSS 2 Test Suite (von Eric Meyer)
Analoge Test Suite für CSS 2 Elemente. Diese wird von Eric Meyer unterhalten, dem Guru schlechthin für alles, was mit CSS zu tun hat.
CSS 1 Test Suite
Testseiten, mit deren Hilfe man feststellen kann, wie ein bestimmter Browser die CSS Spezifikationen umsetzt. Das kann gute Dienste leisten, wenn man den Verdacht hat, dass nicht die eigene Unfähigkeit, sondern eine fehlerhafte Software die Darstellung einer Seite ruiniert.
CSS Reference - Web Design Group
Umfangreiches Material zu CSS. Z.B. Einbinden von Stylesheets in die HTML Seite, Erklärung der CSS Elemente und ein QuickTutorial
House of Style Browser Support Test
Umfanreiche Tabellen zur Unstersützung von CSS in aktuellen Browsern.
CSS 2 Support Chart
Dasselbe für CSS 2 Elemente.
Support Chart für CSS1
Wertvolle Hinweise darüber, welche Elemente von CSS Version 1 von welchen Browserversionen unterstützt werden. Hier klärt sich manch “mysteriöses” Browserverhalten auf. Leider nur bis IE 5, NN 6 und Opera 5.
DevGuru CSS 2 Reference
Schön übersichtlich und leicht zu navigierend listet diese Seite alle CSS 2 Selektoren mit den erlaubten Werten auf. So kann man schnell und problemlos mal was nachschauen.

Zuletzt geändert am 23.08.2007