Eine Hero-Komponente dient als Eyecatcher auf der Eingangsseite eines Webauftritts. Für die Umsetzung kann Flexbox oder Grid eingesetzt werden.
Die Komponente nimmt nur einen Teil des Bildschirms ein, lässt noch Platz für informativen Text und ggf. Links und Botton’s.
Konzeptionell gehört die Komponente in den Header.
Die Standard-Lösung
Es wird ein Hintergrundbild mit mittig zentriertem Text-Logo bildschirmfüllend dargestellt.
<header class="hero">
<logo> ein Text </logo>
</header>
und im CSS
.hero {
background: url("/images/duerer.jpg") no-repeat center right;
background-size: cover;
color: var(--sl-color-amber-400);
align-items: flex-end;
justify-content: center;
height: 35vh;
width: 100vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: .7;
padding: var(--sl-spacing-x-large);
& logo {
font-family: var(--display-serif);
text-shadow: 3px 3px 3px var(--sl-color-gray-700);
font-size: var(--sl-font-size-4x-large);
letter-spacing: var(--sl-spacing-2x-small);
font-weight: var(--sl-font-weight-bold);
}}
Das Bild wird als Hintergrundbild eingefügt.
Das funktioniert wunderbar, hat jedoch einen gravierenden Nachteil: Das Bild wird von semantischen Auswerteprogrammen nicht erkannt. Ein automatischer Preview der Seite spart diesen Hero aus. Solche Seiten sind niemals Barrierefrei.
Flexbox-Lösung
Eine Abwandlung dieser Darstellung platziert mehrere Textelemente im Bild. Bei größeren Bildschirmbreiten werden die Elemente nebeneinander platziert, sonst untereinander und zentriert.
<header class='hero'>
<div class="hero-content">
<h1>Überschrift</h1>
<p>Einzeilige Unterschrift mit Hauptargument</p>
<a href="#" class="button">Optionaler Button</a>
<!-- oder -->
<ul> … Eine Aufzählung … </ul>
</div>
<img src="ein Bild" alt="">
</header>
header.hero {
position: relative;
background: url("/images/some-picture.png");
background-size: cover;
background-repeat: no-repeat;
color: var(--sl-color-neutral-0); /* Grundfarbe für Elemente */
text-align: center; /* Darstellung ohne Flexbox Design */
width: 100vw; /* Gesamte Breite des Screens */
/* Umschalten auf Flexbox Darstellung bei größeren Screens */
@media ( --hero-fullsize ) { /* Elemente werden versetzt */
background-position: center center;/* nebeneinander dargestellt */
padding: var(--sl-spacing-4x-large) var(--sl-spacing-2x-large);
display: flex;
align-items: end;
align-content: baseline;
}}
Diese Methode platziert das Bild im Vordergrund. Die Semantik ist klar und logisch. Oben steht die Überschrift, dann kommt der Teaser und anschließend das Hero-Image.
Manipulation des Hintergrundbildes
Eine einfache Manipulation des Hintergrundbildes gelingt mit folgender Implementierung
<header class="hero">
<div class='wrapper' style="min-height: 35vh;" > <!-- flex -->
<div class="bg-image" style='background-image: url( );' >
<span id="blackOverlay" > </span> <!-- Bildmanipulation -->
</div>
<container class='hero'> <!-- zu zentrierendes --->
<article> <h1> </h1></article> <!-- Flex-Element --->
</container>
</div>
</header>
Grid-basiertes Hero
Wenn man nur eine Grid-Area definiert und alle Grid-Elemente dort platziert, stapelt man effektiv die Inhalte. Das HTML unterscheidet sich kaum:
<header class="hero">
<div class="hero-content">
{%@ Inhalte %}
</div>
<img src="/images/ein-bild.jpg" alt="Hero-Bild">
</header>
Auch das CSS ist übersichtlich:
hero {
display: grid;
grid-template-areas: "hero";
place-items: center;
height: 60vh;
max-height: 600px;
background-color: rgba(60, 135, 179, 0.7);/* Überlagerung des Bildes mit teilweise*/
overflow: hidden; /* transparentem Hintergrund */
& > * { grid-area: hero; } /* Alle Grid-Elemente landen automatisch */
/* im Hero-Grid */
& img {
object-fit: cover;
height: min(60vh, 600px);
width: 100vw;
z-index: -1; /* Bild liegt unten im Stapel */
}
& .hero-content { (...) }
Das Bild wird in dieser Variante mit der Hintergrundfarbe überladen. (z-index des Bildes: -1).
Über ::before und :after können auch SVG’s überladen werden.
Das visuelle Ergebnis der Grid-basierten Lösung ist identisch zur Variante mit Flexbox.