V 1.4 CSS Vertiefung
Komplexe Selektoren
Man kann die grundlegenden CSS-Selektoren, die in der letzten Lektion vorgestellt wurden, auch verketten, um komplexere Selektionen zu machen. So kann entweder auf einzelne, spezielle Elemente konkret zugegriffen oder nur ganz bestimmte Gruppen oder Folgen von Elementen selektiert werden. Mit Pseudoklassen können auch Elemente in ganz bestimmten Zuständen manipuliert werden, wie zum Beispiel bei einem Link der Zustand des Herüberfahrens mit der Maus (“hovern”).
Links im Video
Positionierung, Flussverhalten und Layout
Aufgrund der vielen verschiedenen Ausgabegeräte kann das Thema der Positionierung sehr komplex werden, in diesem Video wurden aber die grundlegenden Herangehensweisen erklärt. Die Positionierung der Elemente auf einer gerenderten Seite hat oft wenig mit der Position im DOM-Tree zu tun.
Das Flussverhalten beschreibt das Verhalten der Elemente im Textfluss, sodass ein Element beispielsweise von den nachfolgenden Elementen in einer Zeile umflossen werden kann oder einen Zeilenumbruch bewirkt. Dieser Textfluss kann über Float und die Positionierung auch individuell manipuliert werden.
Für differenziertere Seiten-Arrangements kann man Eigenschaften, wie Grid oder Flexbox, nutzen.
Links im Video
Float: https://codepen.io/philtim/pen/KrZmdN
Positionierung: https://codepen.io/philtim/pen/GwyWBP
Responsive Design
Responsive Design heißt, alle (relevanten) Endgerätegrößen zu bedienen, wie Smartphones, Laptops, Tablets, Bildschirme…
Technisch gesehen bedeutet Responsive Design im Web-Kontext, dass die Darstellung der Benutzeroberfläche zwar an unterschiedliche Ausgabegeräte angepasst wird, die Datenbasis bleibt jedoch gleich. Konzeptionell bedeutet Responsive Design, dass eine interaktive Anwendung in möglichst vielen (relevanten) Anwendungsszenarien (am Schreibtisch, unterwegs im Bus usw…) genutzt werden kann.
In CSS lässt sich eine adaptive (stufenweise) oder responsive (stufenlose) Darstellung beispielweise durch Breakpoints und Mediaqueries oder flexible Größen- und Positionierungsanweisungen realisieren.
Links im Video
Responsive Cat: http://roxik.com/cat/
Responsive Design Check: http://ami.responsivedesign.is/
CSS Transition und Animation
Mit Übergängen (Transitions) und Animationen können in Webanwendungen zeitbasierte Effekte genutzt werden, die ein Design lebendig und flüssig wirken lassen oder dem Nutzer auf narrativer Ebene den Interaktionsfluss beschreibt. Die Animation von CSS Eigenschaften lässt sich durch viele Parameter steuern, bspw. auch durch die Definition der Beschleunigung der Animation.
Links im Video
CSS Transition Beispiel: https://codepen.io/grausch/pen/XWWeZXW
CSS Animationen: https://codepen.io/ajerez/pen/EaEEOW
Eigene Bezierkurve zeichnen: http://cubic-bezier.com/
Take Aways
- Komplex verkettete Selektoren ermöglichen es, spezifischere Auswahlpfade zu erstellen.
- Elemente haben individuelle Positionen und Flussverhalten, die manipuliert werden können.
- Über Responsive Design lassen sich viele relevante Endgeräte bedienen.
- Über Transition und Animation lassen sich Elemente, oder deren Eigenschaften, animieren.
CSS Inspiration
CSS Zen Garden, eine Seite welche über 200 verschiedene CSS Styles für den gleichen HTML Inhalt gesammelt hat, zeigt sehr gut die Möglichkeiteb von CSS. Lassen Sie sich inspirieren.
?! Fragen und Antworten
(die Publikation der Zusammenfassung erfolgt nach dem Q&A-Termin)
Zusammenfassung von: <TawsTm>
Ist die Abgabe immernoch über FELIX?
Antwort: Abgaben können aus Datenschutz-rechtlichen Gründen nicht über Github, sondern müssen über FELIX getätigt werden. Der Link dazu: Felix
Sollen wir alle unsere Aufgaben hochladen?
Nein! Ihr sollt nur die letzte Aufgabe, dieses mal also Aufgabe 1.4 abgeben. Diese muss aber alle Anforderungen der vorherigen Aufgaben enthalten. Mit hochladen ist hiermit das bereitstellen der Links in Felix gemeint.
Soll ich die Dateien abgeben oder einen Link bereitstellen?
Sie können im Felix Text-Editor die zwei Links einfügen und abspeichern. Der erste Link sollte zur HTML-Seite führen und der zweite zu dem Ordner in ihrem Repository, in dem ihr Code liegt.
Meine h1-Inhalte sind zu klein, was kann ich tun?
Um Größen in Schriften zu verändern, werden hauptsächlich rem, em und pt verwendet.
Sind Anforderungen mit Sternchen Anforderungen die in der Aufgabe vorhanden sein müssen?
Alle Lösungen aus den Aufgaben 1.1. - 1.4. sollen in Aufgabe 1.4. zusammen kommen. Das heißt nicht, dass Sie alle Aufgaben einzeln hochladen sollen. Alle Punkte sollten sich in Aufgabe 1.4. wiederfinden.