Beispiel mit Overlay + SVG

Link zur HTML-Datei

Übung

Von einfach nach anspruchsvoller:

• HTML-Datei auf dem eigenen Rechner speichern
• Im Browser öffnen, Verhalten untersuchen, mit dem Inspector durch die HTML-Elemente und CSS-Eigenschaften gehen
  • was verstehe ich?
  • was nicht?
• Im Editor öffnen und einige Eigenschaften anpassen
  • Overlay
    • die Grösse des Overlays
    • die Hintergrundfarbe
  • SVG
    • die Farbe der Punkte ändern
    • die Grösse des SVG anpassen
    • eine andere Animation einbinden (siehe Code)
• In das eigene Website-Projekt einbinden
• weitere Möglichkeiten: ein anderes SVG einbinden, ein SVG in den Inhalt der Website einbinden, eine SVG-Animation selber erstellen