Der Sieger

Die Abstimmung ist vorbei, und Sonntagsschläfchen, Annas Foto, hat gewonnen! Wir haben dafür ein Abzeichen hinzugefügt: ein span am Anfang ihrer Karte. Im Moment steht das Abzeichen im Weg: Es schiebt das Foto nach unten.

• Die Karte des Siegers fällt auf: Ihr Rahmen ist mindestens 2 px breit und hat eine andere Farbe als die Rahmen der anderen Karten, zum Beispiel Bernstein.
• Das Abzeichen 🏆 Sieger liegt über dem Foto, in der linken oberen Ecke der Karte, 12 px von ihrem oberen und linken Rand entfernt. Das Foto beginnt wieder am oberen Rand der Karte, als wäre das Abzeichen nicht da.
• Eva hat ihr Foto Schneekönigin aus dem Wettbewerb zurückgezogen. Ihre Karte ist verblasst, mit höchstens 60 % Deckkraft, sodass man sie noch sieht, sie aber keine Aufmerksamkeit mehr auf sich zieht. Die anderen Karten bleiben, wie sie sind.

Ein Tipp: Erinnere dich an das Abzeichen „Neu“ auf Oskars Karte in der Lektion über Flexbox, Grid und Position: Das Abzeichen braucht eine Position, und das Element, von dem aus seine Abstände gemessen werden, ebenso.

Das ist die ganze Galerie. Mit dem, was du in den letzten beiden Lektionen gelernt hast, hast du aus schlichten Fotos Karten mit Rahmen, abgerundeten Ecken und Schatten gemacht, sie in einem Raster angeordnet und ein Abzeichen genau dorthin gesetzt, wo du es haben wolltest. In der nächsten Lektion, Hover, Fokus und andere Zustände, sorgst du dafür, dass Buttons wie der zum Abstimmen reagieren, wenn der Mauszeiger darüber steht oder wenn man sie anklickt.