German Slidedeck of a talk held at the first Tourstop of @EdgeDocks "Design for the modern Web" Tour in Bremen, February 25, 2014
ZUKUNFT VON DESIGN UNDLAYOUT IM BROWSERBremen, 25. Februar 2014Andre JAY Meissner@klick_ass#DFTMW
View Slide
CSS Regions
.content {/* Content sammeln im named flow */flow-into: myFlow;}.region {/* Content aus dem named flow rendern */flow-from: myFlow;}
Flow Flow +RegionsRegions
Adaptive UI mit CSS Regions
CSS Regions StatusW3C Working Draft | Adobe, Microsoft
#ODL to the rescue!
OpenDeviceLab.com/DYDD
CSS Blending
Blend Modesnormalscreenmultiplyoverlaydarkenlightencolor-dodgeexclusioncolor-burnhard-lightsoft-lightdifferencehuesaturationcolorluminosityhttp://www.w3.org/TR/compositing-1/#blending
/* blend background images of the same element */.element {background: url(image1.jpg), url(image2.jpg);background-blend-mode: overlay;}Background Blending
div {background-image:url(texture.png);}p {mix-blend-mode: overlay;font-family: "Mythos Std";}Element Blending
CSS Compositing+ Blending StatusW3C Working Draft | Adobe, Canon
Formen in CSS
CSS Shapes
Shape inside#content {shape-inside:circle(50%, 50%, 10em)}
Shape outside#coffee {float: left;shape-outside:circle(50%,50%,10em);}
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;}
CSS Shapes StatusW3C Working Draft | Adobe, Microsoft
html.adobe.com
Andre JAY Meissner@klick_assklick-ass.com[email protected]