Elemente mit der flexbox-Eigenschaft positionieren
Wähle einige Bilder für die Verwendung in deinem Projekt aus, etwa 6-20 Motive. Bereite diese für die Arbeit im Web vor (Größe, Format, Dimensionen.) Benutze die Bilder, um eine Bildergalerie aufzubauen, die auf der flexbox-Eigenschaft basiert. Mit flexbox lassen sich zB. auf einfache Weise Galerien erstellen, die je nach Design eine flexible Oberfläche ergeben, die sich der Bildschirmbreite anpassen kann.
Die Vorgehensweise ist in der Regel:
- Man legt einen Container an (
div,ul, etc.) - Man legt darin die Elemente/Bilder an
- Der Container bekommt die CSS-Eigenschaft
display: flex; - Die Elemente bekommen bei Bedarf
widthund andere Eigenschaften
Gestalte die Galerie so, dass jedes der Bilder auch eine Bildunterschrift haben kann, die in das Design integriert ist.
Einige Beispiele:
Zusammen mit einem :hover-Stil für deine Bilder oder deren Container-Elemente lassen sich die Bildunterschriften auch dynamisch ein- und ausblenden (braucht unter Umständen zusätzlich position). Experimentiere mit Interaktionsmöglichkeiten.
Validiere dein Dokument und korrigiere Fehler unter validator.w3.org. Verwende am besten "Direct Input" als Eingabemethode und füge deinen Code per Copy & Paste ein.
Prüfe deine Seite im Browser deiner Wahl. Denke auch daran, das Browserfenster in der Größe zu verändern, um zu sehen, wie sich deine Seite in verschiedenen Endformaten verhält. Vielleicht kannst du noch etwas in diese Richtung optimieren?
Speichere deine Bilder in einen Unterordner images und denke daran, keine Großschreibung, Umlaute oder Sonderzeichen bei der Benennung der Dateien zu verwenden; sie sollten so aussehen: album_name.jpg
Benutze in Photoshop stets „Für Web speichern“ (=save for web and devices) und sichere als JPG in einer Qualität zwischen 50 und 90.
Vergiss nicht, deinen <img> Tags Attribute für Höhe und Breite zuzuweisen (width und height)
Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.
- Flexbox Playground (englisch)
- Interactive Guide to Flexbox (englisch)
- Flexbox Visual Guide (englisch)
- Flexbox in five steps (englisch)
- Flexbox Froggy
- The new CSS layout ($14 Ebook, $24 Paperback)
- Tutorial: Flexbox-Konzepte
- Tutorial: Introduction to Flexbox (englisch)
- flexbox
- CSS :hover pseudo class
- position
