Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

19
Beyond Borders and Boxes

description

CSS3 geht über die bekannten Gestaltungsmöglichkeiten hinaus, mit Transformationen, Transitionen und Animationen können richtige HTML-Elemente beweglich gemacht werden. Viel mehr als nur Borders und Boxes.

Transcript of Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Page 1: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Beyond Bordersand Boxes

Page 2: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

CSS für Fortgeschrittene

Page 3: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Freier Webdesigner/-entwickler

Eric Eggert, Essen

Page 4: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Freier Webdesigner/-entwickler

(freie Kapazitäten)

Eric Eggert, Essen

Page 5: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

@font-face

Page 6: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 7: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 8: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Syntax@font-face { font-family: "Schriftname"; src: url(schriftname.otf); }

h1 { font-family: Schriftname, Helvetica, sans-serif;}

Page 9: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

kR

Einfach

Preiswert

Cross-Browser(IE4+, FF3.5+, Sf3.1+)

Weit verbreitet

kS

Relativ große Dateien

Schriftdateien weitgehend ungeschützt (kein DRM)

Lizenzprobleme

Page 10: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 11: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 12: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 13: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken
Page 14: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Transitionen

Page 15: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

:hover

0N

Transition

Page 16: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

:hover

0N

Transformation

Page 17: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

Demos

Page 19: Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken

DankeEric Eggert

yatil.de

@yatil