PDF-Design: Modern Glassmorphism Layout

Design-Konzept

Das PDF-Layout verwendet ein modernes Glassmorphism-Design — inspiriert von Apple Keynote-Slides und Behance Case Studies. Jede Seite besteht aus einem vollflächigen Hintergrundbild mit zwei schwebenden Glass-Cards (Titel oben, Beschreibung unten).

Aufbau (Layer-System)

┌─────────────────────────────────┐
│  LAYER 1: Vollbild-Hintergrund  │  ← Edge-to-Edge Bild
│                                 │
│  LAYER 2: Oberes Dark-Overlay   │  ← Kontrast für Titelkarte
│  ┌───────────────────────────┐  │
│  │  ███ TITELKARTE (Glass) ███  │  ← Name + Jahr
│  └───────────────────────────┘  │
│                                 │
│          (Bild sichtbar)        │
│                                 │
│  LAYER 3: Unteres Dark-Overlay  │  ← Kontrast für Beschreibung
│  ┌───────────────────────────┐  │
│  │  ███ BESCHREIBUNG (Glass) ██ │  ← Bio-Text
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Glassmorphism-Technik (Build-Safe)

Jede Karte nutzt die Decoration API mit mehrfachen .Before() Layern:

.Decoration(card =>
{
    // 1. Weicher Schatten (sehr dezent, außen)
    card.Before()
        .Border(4f).BorderColor("#18000000")
        .CornerRadius(20);

    // 2. Lichtkante (innerer Glas-Rim)
    card.Before()
        .Border(1f).BorderColor("#44FFFFFF")
        .CornerRadius(20);

    // 3. Halbtransparenter dunkler Hintergrund
    card.Before()
        .Background("#C8181828")
        .CornerRadius(20);

    // 4. Inhalt (Text)
    card.Content()
        .PaddingVertical(28)
        .PaddingHorizontal(36)
        .Column(inner => { /* ... */ });
});

Design-Details

Element	Stil
Name	36pt, ExtraBold, Uppercase, Weiß, Letter-Spacing 0.5
Trennlinie	1.5pt, halbtransparent Weiß (#55FFFFFF)
Jahrgang	15pt, gedämpft (#CCFFFFFF), Letter-Spacing 1.5
Beschreibungs-Header	14pt, SemiBold, gedämpft, Letter-Spacing 2
Beschreibungstext	11pt, 1.5 Zeilenhöhe, leicht gedämpft (#E8FFFFFF)
Titelkarte Radius	20px
Beschreibungskarte Radius	16px
Overlay oben	220pt Höhe, #99000000
Overlay unten	280pt Höhe, #AA000000
Seiten-Padding	40pt rundum

Vorteile dieses Ansatzes

✅ 100% Build-Safe: Keine SkiaSharp-Abhängigkeit, rein QuestPDF Fluent API
✅ Stabil auf jedem Bild: Kontrast-Overlays garantieren Lesbarkeit
✅ Visuell hochwertig: Glasskarte + Tiefe + Typografie-Hierarchie
✅ Strukturell unverändert: Name oben, Beschreibung unten, Bild vollflächig

Build-Befehl

dotnet build Server/SZUAbsolventenverein.Module.HallOfFame.Server.csproj

Letzte erfolgreiche Kompilierung: 19. Februar 2026 — 0 Fehler, 0 Warnungen.

3.2 KiB Raw Permalink Blame History