FOWD London | Cutting-edge CSS features for Graphics

Slides from my talk at Future of Web Design, London 2014.

Demo

This HTML slide deck is using cutting-edge CSS features for demonstration purposes. It is intended to be presented in a controlled environment.

You may try to replicate that environment by running Google Chrome Canary with the Experimental Web Platform features flag enabled in chrome://flags.

Live Demo | Static slides (PDF)

Learning Resources

Start on html.adobe.com

CSS Shapes

• Creating non-Rectangular Layouts with CSS Shapes by Sara Soueidan

• Animating CSS Shapes with CSS Animations & Transitions by Sara Soueidan

• Demo for Alice in Wonderland

• Source for Demo for Alice in Wonderland

• Brackets code editor

• Introduction to CSS Shapes

• CSS Shapes Editor extension for Brackets

CSS Blend Modes

• Introduction to CSS Blend Modes

• T-Shirt demo with CSS Blend Modes

• Code samples on CodePen.io

• CSS Blend Modes could be the next big thing in Web Design by Bennett Feely

CSS Masking

• CSS Masking on HTML5Rocks.com by Dirk Schulze

• Techniques for Creating Textured Text by Sara Soueidan

• Responsive Mask

• W3C | CSS Masking Module Level 1