CSS/fertige Layouts/Design01
Dies ist eine farblich ansprechende Seite im Flexbox-Layout und mit zwei Themes für light und Dark Mode für eine kleine Firma, Kanzlei oder Privatperson.
- Download: ZIP-Datei (Prüfsumme: )
Inhaltsverzeichnis
Was eine Layout-Vorlage leisten soll
Mindestschriftgröße
In vielen, vor allem älteren Vorlagen findet man oft sehr kleine, feste Schriftgrößen. In unseren Vorlagen wird die Schriftgröße als eine relative Größe festgelegt, sodass der Browser die ihm passende Schriftgröße findet und der Nutzer problemlos zoomen und skalieren kann.
body {
font: normal 1em Arial, sans-serif; /* keine Mindestschriftgröße! Dies wird dem Browser, bzw. dem Nutzer überlassen. */
}
Verweise kennzeichnen
In älteren Vorlagen werden Verweise oft durch text-decoration: none; und eine gefällige, oft aber sogar graue Farbe gestylt, mit dem Ergebnis, dass sie sich nicht mehr deutlich vom umgebenden Fließtext abheben.
a {
color: currentColor;
font-weight: bold;
}
a:hover,
a:focus {
color: #888;
background: gold;
}
Zugänglichkeit
Die aktuelle Seite erhält in der Navigation ein a-Element ohne href-Attribut.
<a aria-current="page">Startseite</a>
Ohne weiteres Zutun sieht so die Navigation immer gleich aus. Über das Aria-current-Attribut erfahren Screenreader, dass dieses die aktuelle Seite ist; mithilfe von CSS kann dies auch optisch kenntlich gemacht werden.
Bei größeren Navigationen ist es nützlich, von der Maus überfahrene oder per Tastatur angesprungene Menüpunkte zu kennzeichnen. So wird mit der Pseudoklasse :hover das jeweils angesprochene Navigationselement selektiert. Damit dieser Vorteil auch für Nutzer gilt, die die Navigation mit der Tastatur durchtabben, wird dies um :focus erweitert.
nav a {
background: darkred;
color: white;
text-decoration: none;
}
nav a[aria-current="page"] {
color: orange;
font-weight: bold;
}
nav a:hover,
nav a:focus {
background: gold;
color: currentColor;
}
Responsivität
Nach dem Grundsatz Mobile First! werden auf schmalen Bildschirmen alle Inhalte untereinander angeordnet, damit nur nach unten gescrollt oder gewischt werden muss.
Auf Anzeigegeräten mit einer breiteren Viewports werden die Elemente dann, wenn der Platz ausreicht, mittels media queries mit dem Flexbox Layout nebeneinander positioniert.
Besonderheiten beim Design
Akzentfarbe als Variable
Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei mit custom properties definiert und können leicht geändert werden. So können Sie das Layout mit nur einer Änderung farblich verändern.
Dabei gibt es eine Auswahl zwischen zwei Themes:
- ein light mode mit weißem Hintergrund und guten Kontrast
- ein Dark Mode mit dunklem Hintergrund, bei dem die Farben augenfreundlich sind, aber trotzdem Wert auf Lesbarkeit und ausreichenden Kontrast gelegt wurde.
SVG-Grafiken
Die grafischen Elemente wie Cliparts und Icons werden über die CSS-Datei als Hintergrundbilder geladen. Sie bestehen aus SVG-Grafiken. Sie können wie HTML-Dateien in einem Code-Editor bearbeitet werden.
Innerhalb eines defs-Element, das einen Definitionsabschnitt deklariert, finden Sie die bekannte style-Festlegungen. Auch hier können die Farben (genau so wie andere Werte) problemlos geändert werden. Wenn Sie die Grafiken im HTML-Dokument inline notieren, ist selbst dies nicht nötig.
