CSS/fertige Layouts/CSS-Garten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bei dieser Webseite steht das einfache, valide und übersichtliche HTML5-Markup im Vordergrund, das dann beliebig gestaltet werden kann.

CSS-Garten
Vorschau-garten.gif
Ein einziges, sorgfältig erstelltes Markup-Template kann eine praktisch unbegrenzte Anzahl von Designanforderungen befriedigen. Erfüllt ein Template die nötigen Voraussetzungen, kann das Design ohne Anpassungen an das Markup beliebig verändert werden, sofern es keine deutlichen Änderungen an der Struktur der Informationen gibt, die im Dokument erhalten sind.'
David Shea

David Shea hatte, um dies zu demonstrieren, den CSS Zen Garten geschaffen. Ich habe diese Idee aufgenommen, die zeigt, dass nach dem Paradigma der Trennung von Inhalt und Präsentation das Design nichts mit dem HTML-Markup einer Seite zu tun haben muss.

Besonderheiten

Das HTML5-Markup beruht auf dem HTML5-Grundgerüst und dem Seitenstrukturierung-Tutorial. Damit man ein Layout nicht nur nach der spektakulären Landing-Page beurteilen kann, erhielt die Vorlage auch Beispiele für eine Inhaltsseite mit Bildern, einen Terminkalender und ein Impressum.

Mit JavaScript werden die neun verfügbaren Stylesheets dynamisch gewechselt.

lesenswert:

CSS-Layout A: Standard

Dieses Layout, das die Farbtöne der Selfhtml-Farbpalette aufnimmt, fand zuerst im Flexboxtutorial Anwendung.

Flexbox ist ein Layout-Modell, bei dem sich Elemente automatisch auf den verfügbaren Platz verteilen. Feste Breiten und Höhenangaben sind so nicht notwendig (, nur die linke Aside-box besitzt eine Höhe von 12em).

lesenswert:

CSS-Layout B: Black & White

Dieses Layout verzichtet auf Farben (bis auf die Randlinien der Block-Elemente) und verwendet dafür unterschiedliche Graustufen.

Auch die Bilder werden mit 

 img {
	filter: grayscale(100%);
 }

passend entfärbt.

Die Navigation wird auch in der Desktop-Ansicht untereinander gezeigt. Die Buttons des Style-Switchers sind nun mit CSS genau so wie Navigationselemente gestaltet. Sowohl bei einer Auswahl mit Maus als auch beim Tabben mit der Tastatur werden Textfarbe und Hintergrund invertiert. Dabei befinden sie sich nun vor dem Hauptinhalt, was mit der CSS-Eigenchaft order erreicht werden kann. Eine solche Änderung der Reihenfolge von Inhalten sollte jedoch nur in Ausnahmefällen erfolgen.

Überschriften werden nicht nur durch die Schriftgröße, sondern auch mit einer Unterstreichung erreicht. Die durchgebrochen Linie erreichen Sie durch text-decoration-style: dashed. Ältere Browser, die dies nicht kennen, zeichnen eine durchgezogene Linie.

lesenswert:

CSS-Layout C: Classic

Dieses Layout besteht aus einer dunkelroten Akzentfarbe mit einem beigen Hintergrund. Als zweite Akzentfarbe dient orange, um Zustände und Interaktionen zu kennzeichnen.

lesenswert:

CSS-Layout D: Duotone

Dieses Beispiel sieht radikal anders aus: Die Grafik wird als sogenanntes Hero-Image über die gesamte Webseite gelegt, die Navigationselemente dazu passend absolut positioniert. Dazu wird das img mit display:none ausgeblendet und als Hintergrund für den body neu referenziert.

Die Gestaltung der Webseite wird durch die Verwendung zwei miteinander kontrastierenden Farbtöne bestimmt. Dieser Duotone-Effekt wurde auch für die Grafik verwendet, die mit einem Bildbarbeitungprogramm entsprechend bearbeitet wurde. Dieser Effekt könnte aber auch mit SVG-Filter erreicht werden.

CSS-Layout E: Elegant

Dieser Entwurf verzichtet auf die Mehrspaltigkeit und ordnet die einzelnen Seitenelemente untereinander an. Die Textabsätze der Hinweisbox werden mit display: inline-block; nebeneinander dargestellt.

In diesem Layout bestehen Navigation und Buttons für die Styleswitcher aus sogenannten Ghost-Buttons mit transparentem Hintergrund und einem dünnen Rand. Oft werden sie über Grafiken gelegt. Auch wenn sie elegant aussehen, erfüllen sie oft nicht ihren eigentlichen Zweck, dem Benutzer Interaktionen zu ermöglichen, da sie schwerer erkennbar als farbig unterlegte UI-Elemente sind.

lesenswert:

CSS-Layout F: Fischer's Friend

Dieses Design hat ein maritimes Motto. Passend dazu erhalten Navigation und Footer einen wellenförmigen Hintergrund. Dieser besteht aus einer SVG-Grafik, die je nach verfügbarem Viewport entsprechend gekachelt wird.


CSS-Layout G: Grünes Grid

Die vorhergehenden Layouts ordneten die Seitenelemente entweder in Spalten oder in Reihen an. MIt Flexbox ist es ohne ein (ansonsten funktionsloses) Containerelement nicht möglich, 2 Elemente innerhalb einer Spalte zu positionieren.

Voilá Grid: Innerhalb des Grid Layout können alle Elemente frei positioniert werden. Die beiden asides #news und #styleswitcher werden in der Dektop-Ansicht innerhalb einer Spalte dargestellt und lassen dem article so mehr Platz.

Sie können jedes einzelne Element einer Webseite gestalten – entweder über seinen Elementnamen, einer id oder Klasse oder einfacher über seine Position innerhalb der Geschwisterelemente.

So sind die Buttons des Style-Switchers und die Listenelemente des article über den nth-child-Selektor ausgewählt und entsprechend gestaltet. Bei den Buttons wurde versucht, die Grundfarben der jeweiligen Layouts zu verwenden.

lesenswert:

CSS-Layout H: Horror Vacui

Unter horror vacui (lat. «Scheu vor der Leere») versteht man den Drang, Räume, Bilder und Webseiten solange mit Inhalten (und Verzierungen) zu füllen, bis sie überladen und unübersichtlich wirken.

Gerade Firmen wie Apple und google haben dagegen klare, aufgeräumte Seiten, in denen die wesentlichen Inhalte gerade durch den (leeren) Abstand zu den anderen Elementen wirken.

Damit ein solches Layout noch etwas hermacht, muss genügend freie Fläche (Weißraum) vorhanden sein. Sie haben aber keinen Einfluss auf die Viewportgröße Ihrer Benutzer, sodass gutes und responsives Webdesign für alle Arten von Endgeräten und nicht nur für die von Ihnen während der Entwicklung verwendete Bildschirmauflösung optimiert werden sollte.

In diesem Layout sind alle Inhalte sichtbar, bei großen Viewports wird versucht die gesamte Breite des Bildschirms auszunutzen, ohne diese mit zu vielen Inhalten zu füllen.

Siehe auch

CSS-Layout I: Industrial Design

Obwohl das Flat Design im Augenblick Stand der Dinge ist, wirken leichte Farbverläufe oft natürlicher. Hier wurde dies aber auf die Spitze getrieben:

  • Navigations-Elemente und Buttons erhielten einen radialen Verlauf. Die vermeintliche Größenänderung wird durch ein Verschieben des colorStops erreicht.
  • Überschriften erhalten einen Verlauf als Hintergrund. Dabei sollte aber auf einen ausreichenden Kontrast zur Textfarbe geachtet werden, was bei der längeren Überschrift des article nicht gelungen ist.
  • Der Rand des article wurde ebenfalls mit einem Verlauf mit scharfen Übergängen realisiert. Die Animation erfolgt über eine Verschiebung der colorStops mittels CSS-animation.

Insgesamt ist dieses Layout wohl eher proof of concept als ein nachahmenswertes, direkt einsetzbares Beispiel.

Urheberrecht

Hinweis:
Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/fertige_Layouts/CSS-Garten&oldid=96151“