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 sechs verschiedenen Designs (3x Dark Themes und 3x Light Themes) hin- und her geschaltet werden. Dieser kann mit einem Handgriff entfernt werden.

Design 02: Man with Hat
ScreenshotScreenshotScreenshot

Besonderheiten

Style Switcher

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>
Hauptartikel: JavaScript und CSS/Stylesheets dynamisch wechseln

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

Header

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

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 eigentlich schon zuwenig Kontrast. Deshalb erhalten die drei hellen Farben gelb, orange und grün ein dunkles Theme mit dunklem Hintergrund.

Der mit dem WebAIM ContrastChecker vorgenommene Test zeigt:

Farbe rot orange gelb grün blau violett
Hintergrund #c32e04 #df6c20 #dfac20 #8db243 #337599 #9357b9
Kontrast
(mind. 4.5:1)
4.87:1 3.79:1 6.05:1 5.16:1 5.06:1 4.87:1
Tick.svg ok Cross.svg nein Tick.svg ok Tick.svg ok Tick.svg ok Tick.svg ok

Die dunklen Farben sind auf sehr hellem grau als Überschriften mit großer Schrift noch lesbar - in nomaler Schriftgröße sollten sie nicht mehr verwendet werden. Orange auf dunkelgrau fällt durch, ist für große Schriften gerade noch vertretbar. Eine Alternative wäre, diese Überschrift nicht in der Akzentfarbe, sondern in weiß, bzw. schwarz zu verwenden.

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

Icons

Im Unterschied zu den Header-Bildern sind die Icons Inline-SVGs innerhalb des HTML-Dokuments, was es ermöglicht, diese direkt im CSS zu stylen. Dies geschieht ganz normal über CSS und custom properties

Styles for Inline-SVG
#ray{
	fill: none; 
	stroke: var(--accentColor1); 
	stroke-width: 7;
	stroke-linecap: round;
}
.cls-2{
	fill: var(--accentColor1);
}
.cls-3{
	fill: var(--backgroundColor2);
}
#darkmode #sky{
	fill: var(--accentColor2);
}


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.