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

Transcript

1. ZUKUNFT VON DESIGN UND
   LAYOUT IM BROWSER
   Bremen, 25. Februar 2014
   Andre JAY Meissner
   @klick_ass
   #DFTMW
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. CSS Regions
   

   View Slide

7. View Slide

8. .content {
   /* Content sammeln im named flow */
   flow-into: myFlow;
   }
   .region {
   /* Content aus dem named flow rendern */
   flow-from: myFlow;
   }
   

   View Slide

9. Flow Flow +
   Regions
   Regions
   

   View Slide

10. View Slide

11. Adaptive UI mit CSS Regions
    

    View Slide

12. View Slide

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

    View Slide

14. View Slide

15. View Slide

16. #ODL to the rescue!
    

    View Slide

17. View Slide

18. OpenDeviceLab.com/DYDD
    

    View Slide

19. CSS Blending
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

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
    

    View Slide

24. /* blend background images of the same element */
    .element {
    background: url(image1.jpg), url(image2.jpg);
    background-blend-mode: overlay;
    }
    Background Blending
    

    View Slide

25. div {
    background-image:
    url(texture.png);
    }
    p {
    mix-blend-mode: overlay;
    font-family: "Mythos Std";
    }
    Element Blending
    

    View Slide

26. CSS Compositing
    + Blending Status
    W3C Working Draft | Adobe, Canon
    

    View Slide

27. View Slide

28. Formen in CSS
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. CSS Shapes
    

    View Slide

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

    View Slide

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

    View Slide

36. View Slide

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;
    }
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. CSS Shapes Status
    W3C Working Draft | Adobe, Microsoft
    

    View Slide

43. html.adobe.com
    

    View Slide

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

    View Slide