THE FUTURE OF DIGITAL LAYOUT
CUTTING-EDGE CSS FEATURES

Nuremberg, October 25, 2013
Andre JAY Meissner
@klick_ass
CSS Regions
.content {
/* collect content into a named flow */
flow-into: myFlow;
}
.region {
/* render the content from the named flo...
Flow

Regions

Flow +
Regions
Markup Separation
<!-- content: semantic markup -->
<article>
<h1>Title</h1>
<p>...</p>
</article>
<!-<div
<div
<div

layo...
Adaptive UI with CSS Regions
Aggregate Content
/* collect content from different places */
header nav,
footer a {
flow-into: menuFlow;
}
#menu {
flow-f...
REGIONS ARE ONLY

VISUAL CONTAINERS
CSS Regions Status

W3C Working Draft | Adobe, Microsoft
Tooling Status
Adobe Edge Tools & Services

Edge Reflow

Edge Web Fonts

Edge Animate

Typekit

Edge Code

PhoneGap Build

Edge Inspect
Adobe Edge Reflow

Design
Responsive
Websites
Adobe Edge Code

Edit HTML,
CSS and
JavaScript
Brackets.io

Code the web.
#ODL to the rescue!
lab-up.org
@LabUpOrg
CSS Blending
Blend Modes
normal
screen
multiply
overlay

darken
lighten
color-dodge
exclusion

color-burn
hard-light
soft-light
differe...
Background Blending
/* blend background images of the same element */
.element {
background: url(image1.jpg), url(image2.j...
Element Blending
div {
background-image: url
(texture.png);
}
p {
mix-blend-mode: overlay;
font-family: "Mythos Std";
}
CSS Compositing
+ Blending Status

W3C Working Draft | Adobe, Canon
Shapes in CSS
CSS Shapes
Shape inside
/* wrap content inside a circle */
#content {
shape-inside:
circle(50%, 50%, 10em)
}
Shape outside
#coffee {
float: left;
shape-outside:
circle(50%,
50%,
10em);
}
Complex shapes
/* shape defined by points of a polygon */
.content {
shape-inside: polygon(x1, y1 x2, y2 ... );
}
/* shape...
CSS Shapes Status

W3C Working Draft | Adobe, Microsoft
html.adobe.com
Andre JAY Meissner
@klick_ass
klick-ass.com
ajm@adobe.com
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
The Future Of Digital Layout - Cutting Edge CSS Features
Upcoming SlideShare
Loading in …5
×

The Future Of Digital Layout - Cutting Edge CSS Features

3,269 views

Published on

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.

Published in: Technology

The Future Of Digital Layout - Cutting Edge CSS Features

  1. 1. THE FUTURE OF DIGITAL LAYOUT CUTTING-EDGE CSS FEATURES Nuremberg, October 25, 2013 Andre JAY Meissner @klick_ass
  2. 2. CSS Regions
  3. 3. .content { /* collect content into a named flow */ flow-into: myFlow; } .region { /* render the content from the named flow */ flow-from: myFlow; }
  4. 4. Flow Regions Flow + Regions
  5. 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. 6. Adaptive UI with CSS Regions
  7. 7. Aggregate Content /* collect content from different places */ header nav, footer a { flow-into: menuFlow; } #menu { flow-from: menuFlow; }
  8. 8. REGIONS ARE ONLY VISUAL CONTAINERS
  9. 9. CSS Regions Status W3C Working Draft | Adobe, Microsoft
  10. 10. Tooling Status
  11. 11. Adobe Edge Tools & Services Edge Reflow Edge Web Fonts Edge Animate Typekit Edge Code PhoneGap Build Edge Inspect
  12. 12. Adobe Edge Reflow Design Responsive Websites
  13. 13. Adobe Edge Code Edit HTML, CSS and JavaScript
  14. 14. Brackets.io Code the web.
  15. 15. #ODL to the rescue!
  16. 16. lab-up.org @LabUpOrg
  17. 17. CSS Blending
  18. 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. 19. Background Blending /* blend background images of the same element */ .element { background: url(image1.jpg), url(image2.jpg); background-blend-mode: overlay; }
  20. 20. Element Blending div { background-image: url (texture.png); } p { mix-blend-mode: overlay; font-family: "Mythos Std"; }
  21. 21. CSS Compositing + Blending Status W3C Working Draft | Adobe, Canon
  22. 22. Shapes in CSS
  23. 23. CSS Shapes
  24. 24. Shape inside /* wrap content inside a circle */ #content { shape-inside: circle(50%, 50%, 10em) }
  25. 25. Shape outside #coffee { float: left; shape-outside: circle(50%, 50%, 10em); }
  26. 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. 27. CSS Shapes Status W3C Working Draft | Adobe, Microsoft
  28. 28. html.adobe.com
  29. 29. Andre JAY Meissner @klick_ass klick-ass.com ajm@adobe.com

×