Kochan & PartnerBrandDesignDevelopment
HTML5 für Entwickler 2. Teil !Markus Greve Für den Abendkurs der Typographischen
Gesellschaft München, 2014
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
Kochan & Partner Brand Design Development
Organisatorisches
2
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-thon 2013
Kochan & Partner Brand Design Development 3
Part 2 CSS
Kochan & Partner Brand Design Development 4
Selektoren Textfluss Transformationen Transitionen, Animationen
Kochan & Partner Brand Design Development
Selektoren CSS2.1
5
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"...
Kochan & Partner Brand Design Development
Selektoren CSS2.1: Demo
6
Kochan & Partner Brand Design Development
Selektoren CSS3 (1)
7
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
Kochan & Partner Brand Design Development
Selektoren CSS3 (2)
8
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>) Invertierung von Selektionsbedingungen
Kochan & Partner Brand Design Development
Selektoren CSS3: Demo
9
Kochan & Partner Brand Design Development
Selektoren für WebForms 2.0
10
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
Kochan & Partner Brand Design Development
Selektoren für WebForms 2.0: Demo
11
Kochan & Partner Brand Design Development 12
Selektoren Textfluss Transformationen Transitionen, Animationen
Kochan & Partner Brand Design Development
Textfluss
13
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
Kochan & Partner Brand Design Development
Textfluss: Demo
14
Kochan & Partner Brand Design Development 15
Selektoren Textfluss Transformationen Transitionen, Animationen
Kochan & Partner Brand Design Development
Transformationen
16
Koordinatensystem, Perspektive, Perspektiv-Verhalten transform-style
Hardware-Beschleunigung
Kombinierbare Transformationen
| Rotation
| Skalierung
| Translation
| Neigung
| Ursprung
| Matrizen-Manipulation
Kochan & Partner Brand Design Development
Transformationen: Demo (1)
17
Kochan & Partner Brand Design Development
Transformationen: Demo (2)
18
Kochan & Partner Brand Design Development
Transformationen: Demo 2D
19
Kochan & Partner Brand Design Development 20
Selektoren Textfluss Transformationen Transitionen, Animationen
Kochan & Partner Brand Design Development
Transitions: Übergänge zwischen Property-Werten
21
Properties all, none, <properties>
Dauer
Timing-Funktion linear, ease*, cubic-bezier
Start-Verzögerung
Kochan & Partner Brand Design Development
Transitions: Beispiele
22
transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: .5s;
Vollständige Notation
transition: width 2s linear, height 1s ease-in, left .5s ease-in-out;
Kurzschreibweise und multiple Übergänge
Kochan & Partner Brand Design Development
Transitions: Demo
23
Kochan & Partner Brand Design Development
Animationen
24
Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%
Animations-Property
| Dauer
| Anzahl Wiederholungen
| Timing-Funktion
| Richtung
Kochan & Partner Brand Design Development
Animationen: Demo
25
Kochan & Partner Brand Design Development
Zusammenfassung: CSS
26
Selektoren CSS 2.1, CSS 3
Textfluss: Blocks, Mehrspaltigkeit, Textkürzung
Transformationen 2D, 3D
Übergänge mit Transitions
Keyframe Animationen
Brand Design Development
Kochan & Partner Brand Design Development 27
Praxis Aufgaben
Kochan & Partner Brand Design Development
Praxis-Aufgaben
28
Vorlage und Musterlösung
http://www.kochan.de/html5/part2css.zip
Brand Design Development
Kochan & Partner Brand Design Development
Praxis-Aufgabe #1
29
2D Transformation: Rotation einer <div>
2D Transformation: Keyframe Animationen mit Position und Farbe
Brand Design Development
Kochan & Partner Brand Design Development
Praxis-Aufgabe #2
30
2D Transformationen
!!!!!3D Transformation: »Banken–Bildung«
!!!!!Keyframe Animation »Ausfalten«
Brand Design Development
#d1#d2
#d3#d4
Kochan & PartnerBrandDesignDevelopment
Vielen Dank!
© 2014 – Alle Rechte vorbehalten. !Kochan & Partner GmbHHirschgartenallee 2580639 München Telefon +49 89 178 49 78Fax +49 89 178 [email protected] www.kochan.de !