17. Zeige Fortschritt

Setze Grid und raffinierte Effekte ein, um den Fortschritt zu zeigen

Mentorin Seraphina

Seraphina wirft einen Blick auf den Entwurf, dann auf dich. „Das hier ist keine Nebensächlichkeit. Wir müssen zeigen, dass wir gewinnen. Unsere Gegner besiegen, auf unsere Seite ziehen, Fortschritt sichtbar machen.

„Mach es richtig, dann braucht es nicht mal viel Code. Mach es falsch, und ich lasse Tinker alles in Regenbogenfarben blinken.“

Deine Aufgaben

Dies ist das Elternelement, das alle Gegner-Karten enthält.

  • Du nutzt hier ein CSS Grid, um ein Raster mit mehreren Spalten zu erzeugen.
  • Verwende repeat() mit 1fr, um alle Spalten gleichmäßig zu verteilen – hier sind es sechs.
  • Mit einer Border-Radius-Variable (Tipp: –border-large) rundest du die Ecken ab.
  • Alles, was aus dem Raster herausragen könnte, wird ausgeblendet – so bleibt’s ordentlich.

Das ist die eigentliche Karte jedes Gegners.

  • Du willst den Inhalt in der Mitte zentrieren – horizontal und vertikal.
  • Die Höhe (450px) ist festgelegt – merke dir, wie du eine bestimmte Höhe in Pixeln setzt
  • Der Cursor soll sich verändern, wenn du drüberfährst – eine gute Gelegenheit, das Wort Fadenkreuz auf Englisch zu lernen. (Tipp: „crosshair“)

In mehreren Schritten wird das Layout der Klasse enemy responsiv angepasst.

  • Ab einer bestimmten Breite (z. B. unter 1200px) sollen aus 6 Spalten nur noch 3 werden.
  • Dann 2 unter 768px, dann 1 unter 576px – bis die Ansicht mobilfreundlich ist.
  • Bei ganz kleinen Geräten (unter 576px) wird zusätzlich die Breite des gesamten Rasters auf 320px begrenzt und zentriert.

Hier gestaltest du die Namen der Gegner:

  • Du gibst ihnen eine markante Schrift
    Nutze die Variable headline
  • Die Größe ist groß – also ein guter Moment, um mit rem zu arbeiten, also 2,5rem
  • Die Textfarbe hat eine Variable, die bereits auf deinem Spickzettel steht und einen Schatten, damit er auf dunklem Hintergrund gut lesbar ist
  • Transformiere den Text in Kapitälchen

Das ist ein versteckter Text, der nur beim Hover erscheint.

  • Die Deckkraft ist anfangs 0 – also unsichtbar
  • Der Hintergrund hebt sich mit einer grünen Farbe ab (Tipp: –green)
  • Der Text ist hell, großgeschrieben und mit einem kleinen Innenabstand. Nutze die Variablen die du bereits hast.
  • Auch hier verwendest du transition, um den Effekt weich erscheinen zu lassen

Hier wird jedem Gegner eine Hintergrundgrafik zugewiesen.

Die Reihenfolge der Kinder wird gezielt angesprochen. Bilder liegen im Ordner img/enemies, Reihenfolge:

  1. tharnok.jpg
  2. kragor.jpg,
  3. vorath.jpg,
  4. zayara.jpg,
  5. umbra.jpg,
  6. cobol.jpg

Jede einzelne Gegner-Karte bekommt einen sanften Übergang – ideal, wenn du mit
Hover-Effekten arbeitest.

  • Setze den Effekt auf 0.3s
  • Die Bilder sind Cover-Hintergründe und werden zentriert ohne Wiederholung dargestellt – das musst du vorher einmal wissen, dann kannst du’s für viele Zwecke nutzen.

Wenn du mit der Maus über eine Karte fährst:

  • Der Name des Gegners (h3) wird unsichtbar
  • Das Icon (i), wird ebenfalls ausgeblendet
  • Der versteckte Text (p) erscheint sichtbar

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

CSS
/* Progress */
.enemy {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   border-radius: var(--border-large);
   overflow: hidden;
}

.enemy-card {
   align-items: center;
   justify-content: center;
   cursor: crosshair;
   height: 450px;
}

@media(width<1200px) {
   .enemy {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media(width<768px) {
   .enemy {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(width<576px) {
   .enemy {
      max-width: 320px;
      margin: auto;
      grid-template-columns: repeat(1, 1fr);
   }
}

.enemy-card h3 {
   font-family: var(--headline);
   font-size: 2.5rem;
   color: var(--light);
   text-shadow: var(--shadow-dark);
   font-variant: small-caps;
}

.enemy-card p {
   opacity: 0;
   background-color: var(--green);
   border-radius: var(--border-small);
   color: var(--light);
   padding: var(--spacing-small);
   font-family: var(--headline);
   transition: 0.3s;
   text-transform: uppercase;
}

.enemy>div {
   transition: 0.3s;
   background-size: cover;
}

.enemy>div:nth-child(1) {
   background-image: url("img/enemies/tharnok.jpg");
}

.enemy>div:nth-child(2) {
   background-image: url("img/enemies/kragor.jpg");
}

.enemy>div:nth-child(3) {
   background-image: url("img/enemies/vorath.jpg");
}

.enemy>div:nth-child(4) {
   background-image: url("img/enemies/zayara.jpg");
}

.enemy>div:nth-child(5) {
   background-image: url("img/enemies/umbra.jpg");
}

.enemy>div:nth-child(6) {
   background-image: url("img/enemies/cobol.jpg");
}

/* Ein-Ausblenden */
.enemy-card:hover p {
   opacity: 1;
}

.enemy-card:hover i {
   opacity: 0;
}

.enemy-card:hover h3 {
   opacity: 0;
}
Nach oben scrollen