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

2.
CSS Regions

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

4.
Flow
Regions
Flow +
Regions

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

6.
Adaptive UI with CSS Regions

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

8.
REGIONS ARE ONLY
VISUAL CONTAINERS

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

10.
Tooling Status

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

12.
Adobe Edge Reflow
Design
Responsive
Websites

13.
Adobe Edge Code
Edit HTML,
CSS and
JavaScript

14.
Brackets.io
Code the web.

15.
#ODL to the rescue!

16.
lab-up.org
@LabUpOrg

17.
CSS Blending

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

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

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

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

22.
Shapes in CSS

23.
CSS Shapes

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

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

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

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

28.
html.adobe.com

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