Modernes UI mit CSS 3

1,327
-1

Published on

Folien zum Workshop „Mit HTML5 in die AppStores an einem Tag“

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,327
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modernes UI mit CSS 3

  1. 1. Mobile WebApps Modernes UI mit CSS 3 aurelio@uxebu.comMontag, 28. März 2011
  2. 2. SyntaxMontag, 28. März 2011
  3. 3. Media QueriesMontag, 28. März 2011
  4. 4. Neu in CSS 3 Selectors Grid positioning Color Multi-column layout Image values 2D transforms Backgrounds and borders 3D transforms Text Transitions Fonts Animations Flexible box layout Media queries Template layout …Montag, 28. März 2011
  5. 5. Neu in CSS 3 Selectors Grid positioning Color Multi-column layout Image values 2D transforms Backgrounds and borders 3D transforms Text Transitions Fonts Animations Flexible box layout Media queries Template layout …Montag, 28. März 2011
  6. 6. http://caniuse.com/Montag, 28. März 2011
  7. 7. Color rgba(red, green, blue, alpha) rgba(0, 96, 0, 0.6) hsl(hue, saturation, lightness) hsl(9, 75%, 50%) hsla(hue, saturation, lightness, alpha) alpha kostet Performance! ie 9, mozilla, webkit, operaMontag, 28. März 2011
  8. 8. Image Values:Verläufe linear und radial mozilla, webkit*, opera 11.1β* teuer!Montag, 28. März 2011
  9. 9. Backgrounds / Borders runde Ecken ie 9, mozilla, webkit, opera auch ungleichmäßig Probleme: Inhalte blutenMontag, 28. März 2011
  10. 10. Backgrounds / Borders border-image mozilla, webkit, opera für buttons, „Kästen“, …Montag, 28. März 2011
  11. 11. Backgrounds / Borders Schlagschatten für Boxen mozilla, webkit, opera teuer!Montag, 28. März 2011
  12. 12. Flexible box layout box-flex: 1; display: block display: boxMontag, 28. März 2011
  13. 13. Flexible Box Layout Flexible Kindboxen Verteilen von „übrigem“ Platz vertikales und horizontales Layout unabhängig von HTML-Reihenfolge mozilla, webkitMontag, 28. März 2011
  14. 14. 2D-Transformations Rotation Scherung Versatz SkalierungMontag, 28. März 2011
  15. 15. 2D-Transformations Kein Einfluss auf Dokumentenfluss ie 9, mozilla, webkit, operaMontag, 28. März 2011
  16. 16. 3D-Transformations webkit (mobile: nur iOS) benötigt Hardware-RenderingMontag, 28. März 2011
  17. 17. Transitions Animierter Übergang zweier Zuständen Dauer,Verzögerung, Timing-Funktion ie 9, mozilla, webkit, operaMontag, 28. März 2011
  18. 18. Animations “Keyframe”-basiert mehr als zwei Zustände möglich jeder Keyframe legt expliziten Zustand festMontag, 28. März 2011
  19. 19. Media Queries Feature-Testing Bildschirmgröße, -orientierung, Seitenverhältnis, Auflösung, etc. WebKit: FeaturesMontag, 28. März 2011
  20. 20. http://bit.ly/bundles/void0/1 http://bit.ly/css3-color http://bit.ly/css3-border-radius http://bit.ly/css3-linear-gradients http://bit.ly/css3-border-image http://bit.ly/css3-box-shadow http://mzl.la/css3-flex-box http://bit.ly/css3-2d-transformations http://bit.ly/css3-3d-transformations http://bit.ly/css3-transitions http://bit.ly/css3-animation http://bit.ly/css3-media-queriesMontag, 28. März 2011
  21. 21. Fragen?Montag, 28. März 2011
  22. 22. Danke aurelio@uxebu.com @void_0Montag, 28. März 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×