CSS/fertige Layouts/Design02
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.
- Download: ZIP-Datei (37kb, Prüfsumme: )
Inhaltsverzeichnis
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
#333gewä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 |
 ok |
 nein |
ok |
ok |
ok |
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.
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
#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);
}
