Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

The Future Of Digital Layout - Cutting Edge CSS Features

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Web Technology
Web Technology
Wird geladen in …3
×

Hier ansehen

1 von 62 Anzeige

The Future Of Digital Layout - Cutting Edge CSS Features

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie The Future Of Digital Layout - Cutting Edge CSS Features (20)

Aktuellste (20)

Anzeige

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

×