• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Modernes UI mit CSS 3
 

Modernes UI mit CSS 3

on

  • 1,395 views

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

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

Statistics

Views

Total Views
1,395
Views on SlideShare
1,208
Embed Views
187

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 187

http://lanyrd.com 187

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Modernes UI mit CSS 3 Modernes UI mit CSS 3 Presentation Transcript

    • Mobile WebApps Modernes UI mit CSS 3 aurelio@uxebu.comMontag, 28. März 2011
    • SyntaxMontag, 28. März 2011
    • Media QueriesMontag, 28. März 2011
    • 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
    • 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
    • http://caniuse.com/Montag, 28. März 2011
    • 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
    • Image Values:Verläufe linear und radial mozilla, webkit*, opera 11.1β* teuer!Montag, 28. März 2011
    • Backgrounds / Borders runde Ecken ie 9, mozilla, webkit, opera auch ungleichmäßig Probleme: Inhalte blutenMontag, 28. März 2011
    • Backgrounds / Borders border-image mozilla, webkit, opera für buttons, „Kästen“, …Montag, 28. März 2011
    • Backgrounds / Borders Schlagschatten für Boxen mozilla, webkit, opera teuer!Montag, 28. März 2011
    • Flexible box layout box-flex: 1; display: block display: boxMontag, 28. März 2011
    • Flexible Box Layout Flexible Kindboxen Verteilen von „übrigem“ Platz vertikales und horizontales Layout unabhängig von HTML-Reihenfolge mozilla, webkitMontag, 28. März 2011
    • 2D-Transformations Rotation Scherung Versatz SkalierungMontag, 28. März 2011
    • 2D-Transformations Kein Einfluss auf Dokumentenfluss ie 9, mozilla, webkit, operaMontag, 28. März 2011
    • 3D-Transformations webkit (mobile: nur iOS) benötigt Hardware-RenderingMontag, 28. März 2011
    • Transitions Animierter Übergang zweier Zuständen Dauer,Verzögerung, Timing-Funktion ie 9, mozilla, webkit, operaMontag, 28. März 2011
    • Animations “Keyframe”-basiert mehr als zwei Zustände möglich jeder Keyframe legt expliziten Zustand festMontag, 28. März 2011
    • Media Queries Feature-Testing Bildschirmgröße, -orientierung, Seitenverhältnis, Auflösung, etc. WebKit: FeaturesMontag, 28. März 2011
    • 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
    • Fragen?Montag, 28. März 2011
    • Danke aurelio@uxebu.com @void_0Montag, 28. März 2011