Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Zukunft von Design und Layout im Browser

Zukunft von Design und Layout im Browser

German Slidedeck of a talk held at the first Tourstop of @EdgeDocks "Design for the modern Web" Tour in Bremen, February 25, 2014

9b69be2dfc5315c66b08c4e8e6a40f29?s=128

Andre Jay Meissner

February 25, 2014
Tweet

Transcript

  1. ZUKUNFT VON DESIGN UND LAYOUT IM BROWSER Bremen, 25. Februar

    2014 Andre JAY Meissner @klick_ass #DFTMW
  2. None
  3. None
  4. None
  5. None
  6. CSS Regions

  7. None
  8. .content { /* Content sammeln im named flow */ flow-into:

    myFlow; } .region { /* Content aus dem named flow rendern */ flow-from: myFlow; }
  9. Flow Flow + Regions Regions

  10. None
  11. Adaptive UI mit CSS Regions

  12. None
  13. CSS Regions Status W3C Working Draft | Adobe, Microsoft

  14. None
  15. None
  16. #ODL to the rescue!

  17. None
  18. OpenDeviceLab.com/DYDD

  19. CSS Blending

  20. None
  21. None
  22. None
  23. Blend Modes normal screen multiply overlay darken lighten color-dodge exclusion

    color-burn hard-light soft-light difference hue saturation color luminosity http://www.w3.org/TR/compositing-1/#blending
  24. /* blend background images of the same element */ .element

    { background: url(image1.jpg), url(image2.jpg); background-blend-mode: overlay; } Background Blending
  25. div { background-image: url(texture.png); } p { mix-blend-mode: overlay; font-family:

    "Mythos Std"; } Element Blending
  26. CSS Compositing + Blending Status W3C Working Draft | Adobe,

    Canon
  27. None
  28. Formen in CSS

  29. None
  30. None
  31. None
  32. None
  33. CSS Shapes

  34. Shape inside #content { shape-inside: circle(50%, 50%, 10em) }

  35. Shape outside #coffee { float: left; shape-outside: circle(50%, 50%, 10em);

    }
  36. None
  37. Complex shapes /* Punkte eines Polygons definieren Shape */ .content

    { shape-inside: polygon(x1, y1 x2, y2 ... ); } /* Alphalevels eines Bildes definieren Shape */ .content { shape-inside: url(image.png); shape-image-threshold: 0.5; }
  38. None
  39. None
  40. None
  41. None
  42. CSS Shapes Status W3C Working Draft | Adobe, Microsoft

  43. html.adobe.com

  44. Andre JAY Meissner @klick_ass klick-ass.com ajm@adobe.com