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

Andre Jay Meissner

February 25, 2014
Tweet

More Decks by Andre Jay Meissner

Other Decks in Design

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