18. Flip-Cards

Kompliziert aber auffällig

Mentorin Seraphina

Mit einem Finger malt sie ein unsichtbares Rechteck in die Luft. „Hier zeigen wir Gesicht. Weil wir keine Angst haben. Und weil es Zeit ist, dass Aetheron weiß, wer wir sind.“

Sie schmunzelt und zeigt auf Tinker, die stolz Pirhouetten dreht.
„Das HTML hat sie schon vorbereitet. Hiram nennt sie inzwischen nur noch die Königin der Verschachtelung. Und ausnahmsweise widerspricht niemand.“

Seraphina lehnt sich grinsend über deinen Code und hebt eine Augenbraue. „So sieht das im HTML aus. Völlig unspektakulär – also lass uns was draus machen.“
Sie schnippt mit den Fingern, und für einen Moment glaubst du, dass sich der Code vor deinen Augen bewegt. „Du hast die Struktur, jetzt braucht es nur noch Stil, Drehung und ein bisschen Drama. Mach die Karten lebendig.“

Deine Aufgaben

Dies ist der gesamte Bereich, der alle Helden umfasst.

  • Du brauchst einen linearen Farbverlauf
  • (Tipp: linear-gradient()), der schräg verläuft (135 Grad) – er beginnt mit der Sekundärfarbe und wechselt dann exakt bei 55 % zur hellen Farbe.
  • Kombiniere das Ganze mit einem Mischmodus, damit der Abschnitt sich elegant in den Hintergrund einfügt (Tipp: mix-blend-mode)
  • Gib dem Abschnitt einen großen Innenabstand (Variable: –spacing-large).
  • Nach oben und unten soll viel Luft sein – arbeite hier mit vertikalem Außenabstand (Variable: –spacing-extra-large).
  • Und zum Schluss: oben und unten ein klarer Rahmen, 5 Pixel stark, in Sekundärfarbe.
  • Hier geht’s nur um die Größe der Überschrift – nimm eine große, runde Zahl in rem. (Tipp: 3rem ist ein guter Startwert.)

Das ist der Container, der alle einzelnen
Heldenelemente enthält.

  • Gib den Kindern Raum zum Atmen: gap: 3rem
  • Die Karten sollen sich auf kleineren Geräten umbrechen – flex-wrap: wrap ist dein Zauber dafür.
  • Die Karten sollen zentriert dargestellt werden.
  • Um das Ganze kompakt zu halten, setze eine maximale Breite (z. B. 1200px), damit es nicht über den Bildschirmrand hinausläuft.

Jede Heldenkarte bekommt eine gewisse Flexibilität:

  • Du willst, dass jede Karte mindestens 20rem groß ist, aber auch größer werden kann.
  • Gleichzeitig soll sie aber nicht breiter als 300px werden.

Das Profilbild eines Helden.

  • Die Form ist vollständig rund – nutze border-radius: 50%.
  • Die maximale Breite liegt bei 18rem.
  • Du brauchst einen dunklen Rahmen (5px, dark) und einen sanften Schatten (verwende –shadow-light).

Hier wird die Karte vorbereitet, die sich
drehen kann.

  • Setze eine feste Breite und Höhe von 300px.
  • Positioniere sie relativ, damit die Kinder sich darin absolut bewegen können.
  • Aktiviere die 3D-Welt, in der sich das Element drehen darf. (Tipp: transform-style: preserve-3d).
  • Die Drehung soll weich ablaufen – also ein transition mit z. B. 0.6s.

Beim Darüberfahren mit der Maus soll sich die Karte horizontal drehen – um 180 Grad.

  • Drehe sie horizontal um 180°
  • Und setze den Cursor auf eine Hand

Diese Klasse gilt für Vorder- und Rückseite der Karte.

  • Sie muss absolut positioniert sein, mit voller Breite und Höhe in Prozent.
  • Wichtig: Die Rückseite darf beim Drehen nicht durchscheinen – das regelst du mit backface-visibility: hidden; .
  • Innen soll der Text zentriert werden und es braucht etwas Innenabstand (z. B. 1rem).
  • Runde die Ecken etwas ab (z. B. border-radius: 10px)

Die Vorderseite der Karte.

  • Richte den Inhalt horizontal und vertikal mit flex aus

Die Rückseite der Karte – also was man nach dem Drehen sieht.

  • Dunkler Hintergrund, helle Schrift.
  • Drehe die Rückseite horizontal um 180 Grad
  • Inhalt soll zentriert sein, auch vertikal und als Spalte mit flex dargestellt werden.

Gestalte es wie du möchtest – das ist dein Raum für Experimente

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

CSS
/* heroes */
#heroes {
   background: linear-gradient(135deg, var(--secondary) 55%, var(--light) 55%);
   mix-blend-mode: multiply;
   padding: var(--spacing-large);
   margin: var(--spacing-extra-large) 0;
   border-bottom: 5px solid var(--secondary);
   border-top: 5px solid var(--secondary);
}

.hero-title {
   font-size: 3rem;
}

.heroes {
   gap: 3rem;
   flex-wrap: wrap;
   justify-content: center;
   max-width: 1200px;
}

.heroes>div {
   flex: 1 1 20rem;
   max-width: 300px;
}

.img-round {
   border-radius: 50%;
   max-width: 18rem;
   border: 5px solid var(--dark);
   box-shadow: var(--shadow-light);
}

.card {
   width: 300px;
   height: 300px;
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.6s;
}

.card-container:hover .card {
   transform: rotateY(180deg);
   cursor: pointer;
}

.card-face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   text-align: center;
   padding: 1rem;
   border-radius: 10px;

}

.card-front {
   display: flex;
   align-items: center;
   justify-content: center;
}

.card-back {
   background-color: var(--dark);
   color: var(--light);
   transform: rotateY(180deg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

q {
   background: var(--dark);
   color: var(--light);
   border-bottom: 2px solid var(--secondary);
   padding: 1rem;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-style: italic;
}

cite {
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-style: italic;
   font-size: var(--font-size-title);
   margin-top: var(--spacing-base);
}
Nach oben scrollen