HTML5 für Entwickler: Part 2, 2014

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

http://en.wikipedia.org/wiki/Annotation

http://en.wikipedia.org/wiki/Document

http://en.wikipedia.org/wiki/Syntax_(logic)

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


Selektoren Textfluss Transformationen Transitionen, Animationen


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"...


Selektoren CSS2.1: Demo

6


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


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


Selektoren CSS3: Demo

9


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


Selektoren für WebForms 2.0: Demo

11


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


Textfluss: Demo

14


Transformationen: Demo (1)

17


Transformationen: Demo (2)

18


Transformationen: Demo 2D

19


Transitions: Übergänge zwischen Property-Werten

21

Properties all, none, <properties>

Dauer

Timing-Funktion linear, ease*, cubic-bezier

Start-Verzögerung


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


Transitions: Demo

23


Animationen

24

Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%

Animations-Property

| Dauer

| Anzahl Wiederholungen

| Timing-Funktion

| Richtung


Animationen: Demo

25


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


Praxis Aufgaben


Praxis-Aufgaben

28

Vorlage und Musterlösung

http://www.kochan.de/html5/part2css.zip


http://www.kochan.de/html5/part2css.zip


Praxis-Aufgabe #1

29

2D Transformation: Rotation einer <div>

2D Transformation: Keyframe Animationen mit Position und Farbe



Praxis-Aufgabe #2

30

2D Transformationen

!!!!!3D Transformation: »Banken–Bildung«

!!!!!Keyframe Animation »Ausfalten«


#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 !

mailto:[email protected]

http://www.peppermind.de

HTML5 für Entwickler: Part 2, 2014

Technology

Transcript of HTML5 für Entwickler: Part 2, 2014