$30 off During Our Annual Pro Sale. View Details »

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

    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
    [email protected]

    View Slide