Hintergründe · FWT Dokumentation

Utilities / Hintergründe

Hintergründe in FWT

Hintergrundklassen helfen dabei, Seitenbereiche sichtbar zu strukturieren: einfache Flächen, dezente Verläufe, Muster, Hero-Hintergründe, dunkle Bereiche oder Akzentflächen.

Wichtig ist dabei immer die Lesbarkeit. Ein Hintergrund darf einen Bereich schöner machen, aber niemals den Inhalt schlechter verständlich machen.

Grundregel: Je lebendiger der Hintergrund, desto ruhiger muss die Textfläche sein.

Grundflächen

Einfache Hintergrundflächen

Grundflächen eignen sich für ruhige Inhaltsbereiche, Seitenhintergründe und einfache Abschnittstrennung.

Live-Beispiel

Surface

Ruhige Standardfläche.

Muted

Dezente Hintergrundfläche.

Page

Seitenhintergrund.

HTML-Code anzeigen

<div class="fwt-grid-3">
    <div class="fwt-bg-box fwt-bg-surface-clean fwt-border">
        <strong>Surface</strong>
        <p class="fwt-text-muted fwt-mb-0">Ruhige Standardfläche.</p>
    </div>

    <div class="fwt-bg-box fwt-bg-surface-muted fwt-border">
        <strong>Muted</strong>
        <p class="fwt-text-muted fwt-mb-0">Dezente Hintergrundfläche.</p>
    </div>

    <div class="fwt-bg-box fwt-bg-page fwt-border">
        <strong>Page</strong>
        <p class="fwt-text-muted fwt-mb-0">Seitenhintergrund.</p>
    </div>
</div>

Soft

Soft- und Wash-Hintergründe

Wash-Hintergründe sind weichere Akzentflächen. Sie eignen sich für Hinweise, Infobereiche, positive Zustände oder ruhige Hervorhebungen.

Live-Beispiel

Primary Wash

Für ruhige Akzentbereiche.

Success Wash

Für positive Bereiche.

Warning Wash

Für Hinweise und Prüfbereiche.

HTML-Code anzeigen

<div class="fwt-grid-3">
    <div class="fwt-bg-box fwt-bg-primary-wash">
        <strong>Primary Wash</strong>
        <p class="fwt-text-muted fwt-mb-0">Für ruhige Akzentbereiche.</p>
    </div>

    <div class="fwt-bg-box fwt-bg-success-wash">
        <strong>Success Wash</strong>
        <p class="fwt-text-muted fwt-mb-0">Für positive Bereiche.</p>
    </div>

    <div class="fwt-bg-box fwt-bg-warning-wash">
        <strong>Warning Wash</strong>
        <p class="fwt-text-muted fwt-mb-0">Für Hinweise und Prüfbereiche.</p>
    </div>
</div>

Verläufe

Verläufe können Flächen hochwertiger wirken lassen. Sie sollten sparsam eingesetzt werden und genug Kontrast für Inhalte bieten.

Live-Beispiel

Cool

Kühler Verlauf

Gut für moderne, technische Bereiche.

Warm

Warmer Verlauf

Gut für freundliche oder kreative Bereiche.

HTML-Code anzeigen

<div class="fwt-grid-2">
    <section class="fwt-bg-box fwt-bg-gradient-cool">
        <p class="fwt-block-kicker">Cool</p>
        <h3 class="fwt-card-title">Kühler Verlauf</h3>
        <p class="fwt-card-text">Gut für moderne, technische Bereiche.</p>
    </section>

    <section class="fwt-bg-box fwt-bg-gradient-warm">
        <p class="fwt-block-kicker">Warm</p>
        <h3 class="fwt-card-title">Warmer Verlauf</h3>
        <p class="fwt-card-text">Gut für freundliche oder kreative Bereiche.</p>
    </section>
</div>

Muster

Raster und dezente Muster

Muster können Doku-Beispiele, technische Bereiche oder Vorschauflächen optisch interessanter machen. Für lange Texte sollten sie aber nur im Hintergrund liegen und nicht direkt unter dem Text stören.

Live-Beispiel

Grid-Muster

Raster eignen sich für Doku- und Technikbereiche.

Checker-Muster

Dezente Muster können Beispiele optisch trennen.

HTML-Code anzeigen

<div class="fwt-grid-2">
    <div class="fwt-bg-box fwt-bg-pattern-grid">
        <div class="fwt-bg-readable">
            <h3 class="fwt-card-title">Grid-Muster</h3>
            <p class="fwt-card-text">Raster eignen sich für Doku- und Technikbereiche.</p>
        </div>
    </div>

    <div class="fwt-bg-box fwt-bg-pattern-checker">
        <div class="fwt-bg-readable">
            <h3 class="fwt-card-title">Checker-Muster</h3>
            <p class="fwt-card-text">Dezente Muster können Beispiele optisch trennen.</p>
        </div>
    </div>
</div>

Hero

Hero-Hintergründe

Hero-Hintergründe sind kräftiger und eignen sich für Einstiegsbereiche, Startseiten oder große Abschnittsanfänge.

Live-Beispiel

Hero-Hintergrund

Stärkerer Hintergrund für Einstiegsbereiche

Hero-Hintergründe eignen sich für Startseiten, Toolseiten oder größere Abschnittsanfänge.

Starten Mehr erfahren

HTML-Code anzeigen

<section class="fwt-bg-box-lg fwt-bg-hero-rainbow">
    <p class="fwt-block-kicker">Hero-Hintergrund</p>

    <h3 class="fwt-block-heading">
        Stärkerer Hintergrund für Einstiegsbereiche
    </h3>

    <p class="fwt-block-lead">
        Hero-Hintergründe eignen sich für Startseiten, Toolseiten oder größere
        Abschnittsanfänge.
    </p>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Starten</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Mehr erfahren</a>
    </div>
</section>

Dark

Dunkle Hintergründe

Dunkle Hintergründe wirken hochwertig, brauchen aber besonders saubere Kontraste, gut sichtbaren Fokus und klare Textflächen.

Live-Beispiel

Dark Background

Dunkle Hintergründe brauchen ruhige Textflächen

Auf dunklen oder lebendigen Hintergründen sollte Text besonders sorgfältig geprüft werden.

Kontrast prüfen Fokus sichtbar

HTML-Code anzeigen

<section class="fwt-bg-box-lg fwt-bg-dark-glow">
    <div class="fwt-bg-readable-dark">
        <p class="fwt-block-kicker">Dark Background</p>

        <h3 class="fwt-block-heading">
            Dunkle Hintergründe brauchen ruhige Textflächen
        </h3>

        <p class="fwt-block-text">
            Auf dunklen oder lebendigen Hintergründen sollte Text besonders
            sorgfältig geprüft werden.
        </p>

        <div class="fwt-badge-group">
            <span class="fwt-badge fwt-badge-info">Kontrast prüfen</span>
            <span class="fwt-badge fwt-badge-success">Fokus sichtbar</span>
        </div>
    </div>
</section>

Akzente

Akzentkanten

Akzentkanten sind oft besser als große farbige Flächen. Sie markieren Inhalte sichtbar, ohne die ganze Fläche zu dominieren.

Live-Beispiel

Links

Akzentkante links.

Oben

Akzentkante oben mit Warnfarbe.

Rainbow

Rainbow-Akzentkante.

HTML-Code anzeigen

<div class="fwt-grid-3">
    <article class="fwt-card fwt-bg-accent-left">
        <h3 class="fwt-card-title">Links</h3>
        <p class="fwt-card-text">Akzentkante links.</p>
    </article>

    <article class="fwt-card fwt-bg-accent-top fwt-bg-accent-warning">
        <h3 class="fwt-card-title">Oben</h3>
        <p class="fwt-card-text">Akzentkante oben mit Warnfarbe.</p>
    </article>

    <article class="fwt-card fwt-bg-accent-left fwt-bg-accent-rainbow">
        <h3 class="fwt-card-title">Rainbow</h3>
        <p class="fwt-card-text">Rainbow-Akzentkante.</p>
    </article>
</div>

Glas

Glass- und Frosted-Flächen

Glasflächen können modern wirken. Sie sollten aber nur eingesetzt werden, wenn Lesbarkeit und Browserunterstützung geprüft wurden.

Live-Beispiel

Glass

Helle Glasfläche mit Weichzeichnung.

Glass Soft

Noch weichere Fläche für dezente Ebenen.

HTML-Code anzeigen

<section class="fwt-bg-box-lg fwt-bg-hero-bright">
    <div class="fwt-grid-2">
        <div class="fwt-bg-box fwt-bg-glass fwt-border fwt-rounded-2xl">
            <h3 class="fwt-card-title">Glass</h3>
            <p class="fwt-card-text">Helle Glasfläche mit Weichzeichnung.</p>
        </div>

        <div class="fwt-bg-box fwt-bg-glass-soft fwt-border fwt-rounded-2xl">
            <h3 class="fwt-card-title">Glass Soft</h3>
            <p class="fwt-card-text">Noch weichere Fläche für dezente Ebenen.</p>
        </div>
    </div>
</section>

Lesbarkeit

Lesbarkeitsflächen

Auf Mustern, Verläufen oder dunklen Hintergründen sollten längere Texte in einer ruhigen Fläche stehen.

Live-Beispiel

Lesbarkeit

Text braucht eine ruhige Fläche

Muster und Verläufe sehen gut aus, aber längere Texte sollten auf einer ruhigen Lesefläche stehen.

HTML-Code anzeigen

<section class="fwt-bg-box-lg fwt-bg-pattern-dots">
    <div class="fwt-bg-readable">
        <p class="fwt-block-kicker">Lesbarkeit</p>

        <h3 class="fwt-block-heading">
            Text braucht eine ruhige Fläche
        </h3>

        <p class="fwt-block-text">
            Muster und Verläufe sehen gut aus, aber längere Texte sollten auf
            einer ruhigen Lesefläche stehen.
        </p>
    </div>
</section>

Hinweise

Hintergründe richtig verwenden

Lesbarkeit zuerst

Hintergrundeffekte dürfen Texte nicht schlechter lesbar machen.

fwt-bg-readable

Muster sparsam einsetzen

Muster wirken gut für Beispiele, aber schlecht unter langen Texten.

fwt-bg-pattern-grid

Dark prüfen

Dunkle Bereiche brauchen saubere Kontraste und klare Fokuszustände.

fwt-bg-dark-glow

Akzent statt Dauerfeuer

Nicht jeder Abschnitt braucht einen Verlauf oder ein Muster.

ruhige Fläche wählen

Hero bewusst nutzen

Hero-Hintergründe eignen sich für starke Einstiege, nicht für jeden kleinen Block.

fwt-bg-hero-soft

Kombination prüfen

Hintergrund, Card, Button und Text müssen zusammen funktionieren.

immer im echten Abschnitt testen