English Version

Mit den CSS-Eigenschaften 'background', 'box-shadow', 'border-image' und 'filter' ist es relativ einfach, spannende Hintergründe Texte zu gestalten, die über einem Hintergrundbild positioniert sind.

In diesem kurzen Artikel zeige ich Ihnen fünf Beispiele für diese Art von Text-Hintergrund.

Einige Worte zur Vorgehensweise

Für die verschiedenen Texthintergründe verwende ich lediglich CSS-Flexbox ohne z-index und ohne die Pseudo-Elemente ::before und ::after.

Den gesamten Code können Sie auf codepen.io betrachten, bearbeiten, verändern oder downloaden.

Der HTML-Code

Das HTML-Grundgerüst sieht folgendermaßen aus:

<div class="box-flex bg-flowers">
  <div class="box-content box-radial">
    <p class="text-caption">Some text with detailed informations<br>
      <span><small><i>Some more text</i></small></span>
    </p>
  </div>
</div>

CSS erläutert

Den Hintergrund-Effekt erhalte ich über die Gestaltung mit den CSS-Eigenschaften background, box-shadow, border-image und filter.

Die Texthintergründe werden mit linearen oder radialen Gradienten eingefärbt.

Die CSS-Eigenschaft box-shadow sorgt dafür, dass sich der Texthintergrund vom Hintergrundbild abhebt.

Der Filter drop-shadow verstärkt die besonderen Effekte.

In drei Beispielen wende ich zudem die CSS-Eigenschaft border-image an, um die Texthintergründe am Bildhintergrund zu „befestigen“.

Im Folgenden zeige ich Ihnen fünf Beispiele für Hintergrund-Effekte, die zentrale Text-Botschaften besonders hervorheben.

Den gesamten Code können Sie auf codepen.io einsehen, bearbeiten, kopieren und für Ihre Bedürfnisse anpassen.

Und was ist mit backdrop-filter?

Leider unterstützen die Browser Firefox und Internet-Explorer 11 nicht die CSS-Eigenschaft backdrop-filter (Stand: Juni 2021); dies betrifft zwar nur rund vier Prozent aller User weltweit, aber auch diese wollen berücksichtigt werden. Daher verzichte ich hier auf dieses Feature.

1. Ein Beispiel mit 'background: radial gradient'

2. Ein Beispiel mit einem zusätzlichen Hintergrundbild

3. Ein Beispiel mit einem 'angeschraubten' Hintergrund

Die Schrauben werden als border-image in die vier Ecken 'geschraubt'.

4. Ein Beispiel mit einem mit einem 'angehefteten' Hintergrund

Die Pins werden als border-image in die vier Ecken 'geheftet'.

5. Ein Beispiel mit einem mit einem farbigen Emailleschild-Effekt

Angeschraubt wie Beispiel Nr. 3 sieht dieses Muster aus wie ein an einer Wand befestigtes Schild aus Emaille.

Den vollständigen Code gibt es auf codepen.io.

Das war es schon für diesmal. Viel Spaß beim Weiterentwickeln und Anwenden der Beispiele!

Links

Mit den folgenden Online-Generatoren können Sie herrliche Hintergründe für Ihre Kernbotschaften erstellen

Generatoren für box-shadow:

cssgenerator.org und cssboxshadow.com

Generatoren für CSS-Filter:

cssfiltergenerator.com und cssgenerator.org

Generatoren für CSS-Gradients:

cssgenerator.org und html-css-js.com

Und hier gibt es einen Generator für Milchglas-Effekte ('glassmorphism'), aber mit backdrop-filter:

glassmorphism.com

Hintergrundbild von Beispiel 2: Matthew Priest auf Pixabay