The document discusses advanced CSS features including CSS regions, blending modes, and shapes, focusing on their potential in creating adaptive user interfaces and enhancing web design. It highlights the status of these features as W3C working drafts and mentions tools from Adobe for implementing responsive web designs. Key concepts such as flow regions and background blending are illustrated with example code snippets.

1. THE FUTURE OF DIGITAL LAYOUT
CUTTING-EDGE CSS FEATURES
Nuremberg, October 25, 2013
Andre JAY Meissner
@klick_ass

7. CSS Regions

10. .content {
/* collect content into a named flow */
flow-into: myFlow;
}
.region {
/* render the content from the named flow */
flow-from: myFlow;
}

11. Flow
Regions
Flow +
Regions

16. Markup Separation
<!-- content: semantic markup -->
<article>
<h1>Title</h1>
<p>...</p>
</article>
<!-<div
<div
<div
layout: helper markup -->
class="region"></div>
class="region"></div>
class="region"></div>

17. Adaptive UI with CSS Regions

19. Aggregate Content
/* collect content from different places */
header nav,
footer a {
flow-into: menuFlow;
}
#menu {
flow-from: menuFlow;
}

20. REGIONS ARE ONLY
VISUAL CONTAINERS

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

22. Tooling Status

23. Adobe Edge Tools & Services
Edge Reflow
Edge Web Fonts
Edge Animate
Typekit
Edge Code
PhoneGap Build
Edge Inspect

24. Adobe Edge Reflow
Design
Responsive
Websites

25. Adobe Edge Code
Edit HTML,
CSS and
JavaScript

26. Brackets.io
Code the web.

30. #ODL to the rescue!

34. lab-up.org
@LabUpOrg

35. CSS Blending

40. 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

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

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

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

45. Shapes in CSS

50. CSS Shapes

51. Shape inside
/* wrap content inside a circle */
#content {
shape-inside:
circle(50%, 50%, 10em)
}

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

55. Complex shapes
/* shape defined by points of a polygon */
.content {
shape-inside: polygon(x1, y1 x2, y2 ... );
}
/* shape defined by the alpha levels of an image */
.content {
shape-inside: url(image.png);
shape-image-threshold: 0.5;
}

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

61. html.adobe.com

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