Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

CSS/fertige Layouts/Design02

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Eine poppige Seite im 3-Spalten-Layout mit einem auffälligen Header. Über einen Styleswitcher kann zwischen verschiedenen Designs hin- und her geschaltet werden. Dieser kann mit einem Handgriff entfernt werden.

Beispiel: Design 02
ScreenshotScreenshotScreenshot


Besonderheiten[Bearbeiten]

Style Switcher[Bearbeiten]

Mit einigen wenigen Handgriffen kann das Theme der Seite farblich angepasst werden.

Im Original lagen die verschiedenfarbigen Banner und Logos als Rastergrafiken in verschiedenen Ordnern, die dann über den passenden Aufruf einer CSS-Datei geladen wird.

Hier binden wir nach dem eigentlichem Stylesheet einen Styleswitcher ein, der mit einem Klick auf die farbigen Buttons jeweils das passende Stylesheet lädt.

<link rel="stylesheet" href="css/standard.css" id="stylesheet">
<script src="js/stylesheet-wechsler.js"></script>

Wenn Sie ein bestimmtes Design einsetzen wollen, können Sie mit einem Handgriff das JavaScript entfernen und das passende Stylesheet manuell einbinden.

Eigentlich wäre es hier besser mehrere Stylesheets zu verwenden:

  • ein Stylesheet mit allen Grundformatierungen und dem Layout
  • Stylesheets, in denen nur die durch die geänderte Akzentfarbe betroffenen Regelsätze enthalten sind.

Header[Bearbeiten]

Besonders auffällig ist der poppige Header. Er besteht aus mehrfachen Hintergründen (multiple backgrounds). Dabei wird von unten nach oben notiert:

  • Zuerst wird der dunkle Hintergrund mit einem sich wiederholenden Verlauf realisiert.
  • Als Fallback für sehr alte Browser (IE9) wird eine dunkle Hintergrundfarbe #333 gewählt.
  • Über diesen wird die rechts positionierte externe SVG-Grafik Design02.svggelegt.
    Über background-size werden die Größen der jeweiligen Grafiken angepasst.
  background: 
             url("../img/Design02.svg") no-repeat right,
             #333 repeating-linear-gradient(-45deg, black, #151515 8em); 
  background-size: contain, auto; 

Die unterschiedlich gefärbten Gläser der Sonnenbrille bestehen aus CSS-Festlegungen innerhalb der Grafik.

  <style>
    .sunglasses {
	  fill:#09c;
	}
  </style>

Während es möglich wäre, diese Füllfarbe ebenfalls dynamisch zu ändern, wurden aus Gründen der Vereinfachung mehrere Grafiken mit jeweils anderen Werten im Ordner img hinterlegt und passend eingebunden.

Kontraste[Bearbeiten]

Das vorliegende Beispiel zeigt gut, wie man durch unterschiedliche Akzentfarben das Aussehen einer Webseite ändern kann. Die poppigen Akzentfarben passen gut zu den Grundtönen, besonders auf dem dunklen Banner. Als h2-Überschrift auf dem hellgrauen Kasten haben sie aber zuwenig Kontrast. Der mit dem Color-Contrast-Analyzer vorgenommene Test zeigt:

Farbe #9357b9 #3983ab #8db243 #dfac20 #df6c20 #c32e04
Helligkeit
(mind. 125)
138 141 100 83.7 121 169
Farbe
(mind. 500)
346 406 379 338 402 502
Cross.png nein Cross.png nein Cross.png nein Cross.png nein Cross.png nein Tick.png ok

Bis auf das Rot, Lila und das Blau haben alle anderen Farben zuwenig Helligkeitsunterschied; das Blau und Lila fallen aber auch bei den Farbwerten mit zuwenig Unterschied durch. Eine Alternative wäre, diese Überschrift nicht in der Akzentfarbe, sondern in schwarz zu verwenden.

Empfehlung: Achten Sie immer auf einen guten Kontrast zwischen den hellen und dunklen Farben.


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.