Designing the web can be very cumbersome. Things tend to get out of hand when more advanced visual techniques such as those known from classic media are to be applied. Add in a variety of viewport sizes and you are either lost or doomed. Now, new CSS features allow us to treat the web as a first-class design surface: wrap and clip text around custom shapes, blend together background images and gain much better layout control for your responsive design. Let's take a look at CSS Shapes, CSS Regions and background blend modes! A talk presented at border:none 2013 October 25, in Nuremberg.

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