Aufgabe 1 ~ Typo
Die erste Aufgabe bestand darin, Text-Formatierungsmöglichkeiten mittels CSS auszuprobieren. Eine Übersicht der möglichen Textformatierungen hielt ich für eine sinnvolle Übung, mit einem zusätzlichen Lerneffekt für mich.
http://bjoern.pisces.uberspace.de/typoCss/
Aufgabe 2 ~ Verläufe und Formen
In der zweiten Aufgabe stand das neue CSS3-Feature der Verläufe im Mittelpunkt und die Möglichkeit, mit dem CSS-Attribut „border“ runde Formem zu erzeugen. Ein Braun-Gerät, in diesem Fall der Taschenrechner, eignete sich durch die Reduziertheit und die geometrischen Formen hervorragend für meine Vorlage. Nur das Logo ist ein Bild. Der Rest ist reines HTML/CSS.
http://bjoern.pisces.uberspace.de/calculator/
Aufgabe 3 ~ Responsive Webdesign
Das Thema dieser Aufgabe waren die sog. Media-Queries, mit denen man variable Seitenlayouts erstellen kann, in abhängigkeit von der Größe des Browserfensters oder Ausgabemediums.
http://bjoern.pisces.uberspace.de/responsive/
Aufgabe 4 ~ CSS3-Transitions, -Transformations, -Matrix
In der letzten Übung sollten die neuen CSS3-Attribute zur Animation und Transformation von HTML-Elementen explorativ erkundet werden.
http://bjoern.pisces.uberspace.de/weihnachtskalender/
Abschlussprojekt ~ Picture Blind
Bei meinem Abschlussprojekt entschied ich mich nach einigen experimentellen Versuchen für eine „etwas andere“ Bildergalerie, da ich dort die beiden für mich spannensten CSS3-Neuerungen der Transformationen und Media-Queries sehr gut anwenden konnte. Dabei verwendete ich unter anderem folgende CSS3-Elemente:
- Media-Queries
- Matrix
- @font-face
- Pseudoklassen (z.B. :nth-child)
Die Animationen habe ich mit jQuery und JavaScript realisiert.
http://bjoern.pisces.uberspace.de/pictureBlind/
