In dieser zweiten Ausgabe für 2014 sind neben dem Theorie-Teil (Selektoren, Textfluss, Transformationen, Transitionen und Animationen) zwei praktische Aufgaben enthalten. Neben einer Vorlage zum starten werden auch zwei exemplarische Musterlösungen bereitgestellt.

1. markup, noun. A markup language is a modern
system for annotating a document in a way that is
syntactically distinguishable from the text. The idea
and terminology evolved from the »marking up« of
manuscripts
—Wikipedia
HTML5 für Entwickler
2. Teil
!
Markus Greve
Für den Abendkurs der Typographischen
Gesellschaft München, 2014
Kochan & Partner
Brand
Design
Development

2. Organisatorisches
30.01. Einführung
Hidden Gems
Part 1: Markup
!
06.02. Part 2: CSS
13.02. Part 3: Javascript
20.02. Hack-a-thon: Thema offen!
Hack-a-tho
n 2013
2
Kochan & Partner Brand Design Development

3. Part 2
CSS
3
Kochan & Partner Brand Design Development

4. Selektoren
Textfluss
Transformationen
Transitionen, Animationen
4
Kochan & Partner Brand Design Development

5. Selektoren CSS2.1
Pseudo-Klassen
:first-child
Genau das erste Kind
:last-child
Genau das letzte Kind
Attribut-spezifische Selektion
element[attribute]
element mit Attribut attribute
a[target="_blank"]
Anchor mit Attribut target und Attributwert
exakt "_blank"
div[class~="copytext"]
Division mit einer mindestens der Klasse
copytext (= div.copytext)
div[lang|="de"]
Division mit Attribut lang matcht alle Werte, die
von links mit de beginnen, z.B.
lang="de", lang="de-de, de-at"...
5
Kochan & Partner Brand Design Development

6. Selektoren CSS2.1: Demo
6
Kochan & Partner Brand Design Development

7. Selektoren CSS3 (1)
Pseudo-Klassen
:root
Das root-Element des Dokuments, body
:nth-child(n)
Das n-te Kind, z.B. nth-child(7),
nth-child(odd)oder nth-child(even)
:nth-last-child(n)
dito, umgekehrte Zählung
:first-of-type
Selektiert nur das erste zutreffende Element
:last-of-type
dito, umgekehrte Zählung
:nth-of-type(n)
dito, n-tes zutreffendes Element
:nth-last-of-type(n)
(…)
:only-child
Ein Einzelkind
:empty
Ein leeres Element
:enabled, :disabled
Ein- oder ausgeschaltetes Element, z.B. Button
:checked
Markiertes Element, z.B. Checkbox oder Radiobox
7
Kochan & Partner Brand Design Development

8. Selektoren CSS3 (2)
Pseudo-Elemente
:first-line
Die erste Zeile des Textes
:first-letter
Der erste Buchstabe des Textes
:before
Generierter Inhalt vor dem Element
:after
Generierter Inhalt nach dem Element
Attribut-spezifische Selektion
div[lang^="de"]
Attributwert beginnt mit "de"
div[lang$="de"]
Attributwert endet mit "de"
div[lang*="de"]
Attributwert beinhaltet "de"
Negation
:not(<CSS 3 Selector>)
8
Invertierung von Selektionsbedingungen
Kochan & Partner Brand Design Development

9. Selektoren CSS3: Demo
9
Kochan & Partner Brand Design Development

10. Selektoren für WebForms 2.0
Pseudo-Elemente
:default
Default-submit Button des Formulars
:indeterminate
Unbestimmte Check- und Radioboxen
:valid
Gültiger Wert
:invalid
Ungültiger Wert
:in-range
Innerhalb des Wertebereichs
:out-of-range
Außerhalb des Wertebereichs
:required
Pflichtfeld
:optional
Elemente ohne required und ohne Validierung
:read-only
Schreibgeschützte Elemente
:read-write
Elemente ohne Schreibschutz
10
Kochan & Partner Brand Design Development

11. Selektoren für WebForms 2.0: Demo
11
Kochan & Partner Brand Design Development

12. Selektoren
Textfluss
Transformationen
Transitionen, Animationen
12
Kochan & Partner Brand Design Development

13. Textfluss
Eingebundene Block-Darstellung display: inline-block
Mehrspaltiger Textfluss column-count, column-rule, column-gap
Textkürzung text-overflow: ellipsis
Hinweis! white-space: nowrap nicht vergessen
13
Kochan & Partner Brand Design Development

14. Textfluss: Demo
14
Kochan & Partner Brand Design Development

15. Selektoren
Textfluss
Transformationen
Transitionen, Animationen
15
Kochan & Partner Brand Design Development

16. Transformationen
Koordinatensystem, Perspektive, Perspektiv-Verhalten transform-style
Hardware-Beschleunigung
Kombinierbare Transformationen
| Rotation
| Skalierung
| Translation
| Neigung
| Ursprung
| Matrizen-Manipulation
16
Kochan & Partner Brand Design Development

17. Transformationen: Demo (1)
17
Kochan & Partner Brand Design Development

18. Transformationen: Demo (2)
18
Kochan & Partner Brand Design Development

19. Transformationen: Demo 2D
19
Kochan & Partner Brand Design Development

20. Selektoren
Textfluss
Transformationen
Transitionen, Animationen
20
Kochan & Partner Brand Design Development

21. Transitions: Übergänge zwischen Property-Werten
Properties all, none, <properties>
Dauer
Timing-Funktion linear, ease*, cubic-bezier
Start-Verzögerung
21
Kochan & Partner Brand Design Development

22. Transitions: Beispiele
Vollständige Notation
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: .5s;
Kurzschreibweise und multiple Übergänge
transition: width 2s linear,
height 1s ease-in,
left .5s ease-in-out;
22
Kochan & Partner Brand Design Development

23. Transitions: Demo
23
Kochan & Partner Brand Design Development

24. Animationen
Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%
Animations-Property
| Dauer
| Anzahl Wiederholungen
| Timing-Funktion
| Richtung
24
Kochan & Partner Brand Design Development

25. Animationen: Demo
25
Kochan & Partner Brand Design Development

26. Zusammenfassung: CSS
Selektoren CSS 2.1, CSS 3
Textfluss: Blocks, Mehrspaltigkeit, Textkürzung
Transformationen 2D, 3D
Übergänge mit Transitions
Keyframe Animationen
26
Kochan & Partner Brand Design Development

27. Praxis
Aufgaben
27
Kochan & Partner Brand Design Development

28. Praxis-Aufgaben
Vorlage und Musterlösung
http://www.kochan.de/html5/part2css.zip
28
Kochan & Partner Brand Design Development

29. Praxis-Aufgabe #1
2D Transformation: Rotation einer <div>
2D Transformation: Keyframe Animationen mit Position und Farbe
29
Kochan & Partner Brand Design Development

30. Praxis-Aufgabe #2
2D Transformationen
#d1
!
!
#d2
!
!
#d3
#d4
!
3D Transformation: »Banken–Bildung«
!
!
!
!
!
Keyframe Animation »Ausfalten«
30
Kochan & Partner Brand Design Development

31. Vielen Dank!
Kochan & Partner
Brand
Design
Development
© 2014 – Alle Rechte vorbehalten.
!
Kochan & Partner GmbH
Hirschgartenallee 25
80639 München
Telefon +49 89 178 49 78
Fax +49 89 178 1235
kontakt@kochan.de
www.kochan.de
!