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
6. CSS Regions
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
11. Adaptive UI mit CSS Regions
13. CSS Regions Status W3C Working Draft | Adobe, Microsoft
16. #ODL to the rescue!
18. OpenDeviceLab.com/DYDD
19. CSS Blending
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
28. Formen in CSS
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); }
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; }
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