CSS Cascading Style Sheets

Modernes Design von Webseiten ist ohne die Verwendung von CSS nicht mehr denkbar. Erst der Einsatz der CSS-Technik ermöglicht eine saubere Trennung von Inhalt und Design. Mit dem HTML-Code wird der Inhalt der Webseite strukturiert, CSS bestimmt das Design.
Ich behandle hier sowohl Aspekte der Verwendung des CSS 2 bzw. 2.1 Standards als auch solche, diese sich erst mit CSS3-Standard umsetzbar sind.

CSS 2 / CSS 2.1

CSS 2 ist eigentlich -gemessen am Alter des Internets- ein uralter Hut. Der Standard wurde bereits im Jahr 1998 verabschiedet. Trotzdem setzt bis heute im Grunde kein Browser diesen Standard vollständig um. Wenn von CSS2 die Rede ist , bezieht man sich heute allerdings meist auf CSS 2.1, eine revidierte Fassung, die ab dem Jahr 2002 erarbeitet wird. Zwischen CSS2 und CSS 2.1 gibt es keine fundamentalen Unterschiede.
Obwohl CSS 2 heute bereits Allgemeingut bei der Gestaltung von Webseiten ist, gibt es hier Techniken, die nur selten Beachtung finden oder immer wieder in Foren nachgefragt werden.

CSS 3

CSS3 wird vielfach in engem Zusammenhang mit dem neuen HTML-Standard HTML5 genannt, obwohl beide nicht zwingend miteinander in Verbindung stehen. Eine Hauptursache dafür, dass beide oft in einem Atemzug genannt werden sehe ich vor allem darin, dass die Vertreter einer neuen Browsergeneration (allen voran Firefox ab Version 4 und Internet Explorer 9) die mit diesen neuen Standards verbundenen Techniken in wesentlich breiterem Umfang unterstützen als ihre Vorgänger. Das trifft in besonderem Maße auf die Microsoft Browserfamilie zu.
Wenn man HTML5 und CSS3 verwendet, sollte man allerdings im Auge behalten, dass sich beide Standards noch im Entwurfsstadium befinden und dass die Unterstützung durch die einzelnen Browser höchst unterschiedlich ist.

CSS4

Wenn man in einer der gängigen Suchmaschinen nach CSS4 sucht, findet man eine ganze Reihe von relevanten Ergebnissen. So schrieb zum Beispiel Denis Potschien im Online-Magazin Dr. Web in einem Beitrag vom 31.Januar 2013 (http://www.drweb.de/magazin/css4-bereits-heute-nutzen-mit-cssparentselector-38683/):

Mit CSS ist es einfach, Kind- und Geschwisterelemente anzusprechen. Elternelemente anzusprechen ist – zumindest bisher – mit CSS nicht möglich. Für CSS4 ist diese Option zwar vorgesehen, allerdings dürfte es noch eine Weile dauern, bis die ersten Browser CSS4 im Ansatz interpretieren können.

Auch das Webportal der Zeitschrift t3n Magazin schlägt in diese Kerbe. Dort behauptete Autor Nicolai Schwarz in einem Beitrag vom 05.09.2012 (http://t3n.de/magazin/webstandards-aktuell-css4-heute-schon-morgen-denken-229619/):

CSS4: So sieht die Zukunft des Webstandards aus Als Webprofi ist man seiner Zeit idealerweise immer ein wenig voraus. Während sich andere also erst langsam an CSS3 gewöhnen, lohnt sich schon einmal ein Blick auf CSS4. Natürlich wird es noch eine ganze Weile dauern, bis die ersten CSS4-Neuerungen in allen gängigen Browsern laufen.

In beiden Fällen (wie auch in vielen anderen, auf die ich hier nicht im Detail eingehen will) haben wir so etwas ähnliches wie ein Entenkücken vor uns, keine ausgewachsene Ente zwar, aber immerhin. Tatsächlich werden CSS-Faetures besprochen, die gerade aktuell sind (oder aktuell waren), wie z.B. bestimmte neuartige Selektoren und dann wird so getan, als ob sie Bestandteil eines im Entstehen befindlichen Standards CSS4 seien.

Dabei hat Tab Atkins Jr. in seinem Blog im September 2012 klargestellt (siehe http://www.xanthir.com/b4Ko0):

There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.

Das hat aber keinen der o.g. Blog-Autoren dazu veranlasst, die Beiträge sachlich richtig zu stellen.

Auf dieser Website wird es also keinen gesonderten Bereich zum Thema CSS4 geben. Was folgt ist eine Übersicht aller Artikel, die sich explizit mit den Möglichkeiten von CSS (2.1) und CSS3 beschäftigen.

Runde Ecken mit CSS3 und border-radius

Für viele Webseiten-Designer ein Dauerthema: die Darstellung runder Ecken. Ganze CSS-Blogs haben dieses Thema wieder und wieder behandelt.

Mit CSS3 geht alles ganz einfach: Wie, das kann man hier lesen.

mehr …

Mit box-shadow div-Elemente gestalten

Box-Shadow zeichnet, wie der Name schon sagt, einen Schatten um ein HTML-Element. Für diesen Schatten kann die horizontale und vertikale Länge, die Stärke des Blur-Effektes sowie die Schattenfarbe festlegen.

mehr …

Animationen mit CSS3 - Teil 2

Animationen mit CSS3 - Teil 2

Weitere Möglichkeiten der Gestaltung von CSS3-Animationen - Animationen mit CSS3 - Teil 2 transition-Übergänge mit anderen Ereignisse auslösen

mehr …

Animationen mit CSS3 - Teil 1

Animationen mit CSS3 - Teil 1

Grundlagen der Gestaltung von Animationen mit CSS3. Animationen mit CSS3 - Teil 1 Grundlagen und einfache Beispiele für Übergänge mit transition

mehr …

Farbverläufe mit CSS3 und ohne Grafik

Mit Gradienten kann man lineare und radiale Farbverläufe gestalten.

mehr …

Feste Bereiche mit CSS

Hier stelle ich eine Möglichkeit vor, mit solchen festen Bereichen dem Besucher einer Webseite einen echten Mehrwert zu liefern, denn auf diese Art und Weise kann zum Beispiel eine Navigationleiste immer im sichtbaren Bereich bleiben.

mehr …

Webseiten mit Hintergrundbildern gestalten

Viele Website-Designs verwenden Hintergrundbilder. Hier werden die beiden Grundformen erklärt.

mehr …

Webdesign mit gleicher Höhe der Spalten

Bei der Gestaltung von Webseiten mit mehrspaltigem Layout steht man häufig vor dem Problem, dass diese Spalten nicht die gleiche Höhe haben. Häufig wird dieser Missstand mit dem Einsatz von JavaScript oder mit Hilfe spezifisch gestalteter Hintergrundbilder gelöst. In den meisten Fällen erweisen sich derartige Lösungen als wenig optimal.

mehr …

Transparenzen mit Opacity

Opacity ist schon fast ein Oldtimer, immerhin unterstützt der Firefox Browser diese CSS-Eigenschaft schon seit einer halben Ewigkeit. Doch zum Standard hat sich diese CSS-Eigenschaft erst mit CSS3 gemausert.

mehr …

Runde Boxen mit CSS und drei Grafiken

Die Darstellung runder Boxen ist ein unerschöpfliches Thema unter den Webdesignern. Ich stelle an dieser Stelle eine Variante vor, bei der die runden Boxen auf drei Grafiken und einem guten Stück CSS basieren. Diese Variante kommt mit herkömmlichen CSS-Anweisungen aus, basiert also nicht auf CSS3 und ist somit auch für die Darstellung in alten Browsern geeignet.

mehr …

Schriftarten und Schriftgestaltung auf Webseiten

Texte mit word-spacing und letter-spacing lesbarer gestalten. Auf Webseiten mit umfangreichem Text sollte man sich auf jeden Fall ausreichend Gedanken über die Schriftgestaltung machen. Dazu hier einige Anregungen.

mehr …

Text- und Filter-Effekte im Internet Explorer

Microsoft kochte in der Vergangenheit immer wieder sein eigenes Süppchen. Schon seit längerer Zeit beherrscht der Internet-Explorer sogenannte Filter. Diese lassen sich teilweise als Ersatz verwenden, wenn man CSS3 Eigenschaften beim Internet Explorer 8 (oder noch älteren Versionen) simulieren will.

mehr …

Texteffekte für alle Browser

Microsoft mit dem Internet Explorer und alle anderen Browserschmieden sind bisher oft ganz unterschiedliche Wege gegangen. Hier wird erklärt, wie man mit den Filter-Techniken und modernen CSS3-Eigenschaften ähnlich Effekte erzielt. Zusammenfassung verschiedener Texteffekte und ihr Einsatz, auch für ältere Browser.

mehr …

Textrotation mit CSS 3

Objekte Drehen, Verschieben, Skalieren, Verzerren mit CSS3

mehr …

Individuelle Schriftarten mit Webfonts

Individuelle Schriftarten mit Webfonts

mehr …

Zusammenfassung wichtiger CSS3-Anweisungen

Ein Überblick zu wichtigen CSS3-Eigenschaften mit weiterführenden Links

mehr …

Nützliche Links

Links zu Webseiten mit weiterführenden Informationen, Code-Generatoren und Beispielen

mehr …

Animationen mit CSS3 - Teil 3 Keyframe Animationen

Animationen mit CSS3 - Teil 3 Keyframe Animationen

Animationen mit Keyframes sind die komplexeste Animationstechnik, die CSS3 (bisher) zu bieten hat.

mehr …

Navigationsleisten mit CSS3 gestalten

In der Vergangenheit wurde bei der optisch auffälligen Gestaltung von Navigationsleisten auf Websites in der Regel JavaScript eingesetzt. Mit dem Siegeszug von CSS3 ergeben sich jedoch deutlich weitergehende Möglichkeiten.

mehr …

Animationen mit CSS3 - Teil 4 Keyframe Animationen

Animationen mit CSS3 - Teil 4 Keyframe Animationen

Animationen mit Keyframes werden laufen entweder unendlich ab oder durchlaufen eine festgelegte Anzahl von Iterationen. Hier wird erklärt, wie man eine eigentlich unendlich ablaufende Keyframe Animation anhält.

mehr …

Animationen mit CSS3 - Teil 5 -Beispiel einer komplexen CSS3 Keyframe Animation

Animationen mit CSS3 - Teil 5 -Beispiel einer komplexen CSS3 Keyframe Animation

Bei diesem Beispiel kommt eine Biene in die Szene geflogen, sieht die Blume und fliegt auf sie zu. Die Blume reagiert auf die Annäherung der Biene, in dem sie sich emporreckt. Die Biene flirtet mit der Blume (Herzen) die sich noch stärker der Biene zuwendet. Doch dann fliegt die Biene weiter und die Blume sinkt enttäuscht in ihre Ausgangsposition zurück.

mehr …

Animationen mit CSS3 - Teil 6

Bei diesem Beispiel kommt eine Biene in die Szene geflogen, sieht die Blume und fliegt auf sie zu. Die Blume reagiert auf die Annäherung der Biene, in dem sie sich emporreckt. Die Biene flirtet mit der Blume (Herzen) die sich noch stärker der Biene zuwendet. Doch dann fliegt die Biene weiter und die Blume sinkt enttäuscht in ihre Ausgangsposition zurück.

mehr …

Das Blockquote-Tag

Das Blockquote-Tag wird vielfach unterschätzt. Doch damit lassen sich interessante eye-catcher-Effekte erzielen. Wie das geht, dass kann man in diesem kleinen Beitrag zum Blockquote-Tag nachlesen.

mehr …

Layout ohne Tabellen

Noch vor einigen Jahren kam es häufig vor, dass man beim Blick in den Quellcode einer Webseite mit einem endlosen Tabellensalat konfrontiert wurde und auch heute noch kursieren im Internet auf einschlägigen Websites Designvorlagen/Templates, die im Wesentlichen auf Tabellen im HTML-Code basieren. Ich möchte hier gar nicht auf die Nachteile derartiger Designvorlagen eingehen. Jeder Webdesigner, der einmal in die Situation kam, ein derartiges Layout anzupassen bzw. zu erweitern, weiß ein Lied davon zu singen, wie umständlich das ist. Ich möchte daher hier an Hand einiger Beispiele die Grundzüge der Gestaltung eines Website-Layouts mit frei positionierbaren div-Layern erklären.

mehr …