Your SlideShare is downloading. ×
The Future Of Digital Layout - Cutting Edge CSS Features
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Future Of Digital Layout - Cutting Edge CSS Features

1,343
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 …

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,343
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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