Aufgaben

03.11.2016 03:30 Uhr

Vervollständigen Sie die Sitzungsaufgabe.

Wenn Sie mit Ihrem Template zufrieden sind, übertragen Sie bitte entsprechend der Sitzungsaufgabe die restlichen Seiten Ihres Projektes.

Erweitern Sie Ihr Projekt um eine WordCloud, die Sie in das Strukturelement aside legen.

Passen Sie Ihr Stylesheet (CSS) so an, dass zwischen den article-Elementen ein erkennbarer Abstand entsteht.

Setzen Sie mindestens drei weitere aus CSS3 stammende Effekte ein:

1. Verlauf als Hintergrund mit gradient gestalten.

2. Die erste Zeile eines Textes einziehen. (Beispiel)

3. Die Position, Größe und Form und auch die Perspektive eines Bild mit transform ändern.


Tipp

Start- und Endstatus von Animationen bzw. Transitions können einfach durch die Veränderung, die von :hover ausgelöst wird, bestimmen.


Aufgabe für Fortgeschrittene

Integrieren Sie ein Akkordeon ohne Javascript: div:hover öffnet das accordion, div schließt es.

Integrieren Sie eine Transition mit Cubic Bézier mit komplexen Bewegungen wie ein Abprallen oder das Bumpern bei einem Flippers.

Zählen Sie automatisch mehrere Kapitel durch (mit counter-increment).

Schlagwörter: