https://github.com/oslego/fowd-london-2014

Slides from my talk at Future of Web Design in London, 2014
https://github.com/oslego/fowd-london-2014

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/oslego/fowd-london-2014
• Owner: oslego
• License: mit
• Created: 2014-04-07T14:41:00.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-11-20T12:10:38.000Z (about 10 years ago)
• Last Synced: 2024-04-14T14:31:54.290Z (9 months ago)
• Language: JavaScript
• Homepage: http://razvancaliman.com/fowd-london-2014/#/
• Size: 16.7 MB
• Stars: 30
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
FOWD London | Cutting-edge CSS features for Graphics

===

Slides from my talk at [Future of Web Design, London 2014](http://futureofwebdesign.com/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](https://www.google.com/intl/en/chrome/browser/canary.html)

with the _Experimental Web Platform features_ flag enabled in `chrome://flags`.

[Live Demo](http://razvancaliman.com/fowd-london-2014/#/) | [Static slides (PDF)](https://speakerdeck.com/razvancaliman/cutting-edge-css-features-css-blend-modes-css-masking-and-css-shapes)

Learning Resources

---

Start on [html.adobe.com](http://html.adobe.com/webplatform)

**CSS Shapes**

  * [Creating non-Rectangular Layouts with CSS Shapes](http://sarasoueidan.com/blog/css-shapes/) by Sara Soueidan

  * [Animating CSS Shapes with CSS Animations & Transitions](http://sarasoueidan.com/blog/animating-css-shapes/) by Sara Soueidan

  * [Demo for Alice in Wonderland ](http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/)

  * [Source for Demo for Alice in Wonderland](https://github.com/adobe-webplatform/Demo-for-Alice-s-Adventures-in-Wonderland)

  * [Brackets code editor](http://brackets.io)

  * [Introduction to CSS Shapes](http://html.adobe.com/webplatform/layout/shapes/)

  * [CSS Shapes Editor extension for Brackets](http://blog.brackets.io/2014/04/17/css-shapes-editor/)

**CSS Blend Modes**

  * [Introduction to CSS Blend Modes](http://html.adobe.com/webplatform/graphics/blendmodes/)

  * [T-Shirt demo with CSS Blend Modes](razvancaliman.com/cssblending/)

  * [Code samples on CodePen.io](http://codepen.io/collection/hfxiw)

  * [CSS Blend Modes could be the next big thing in Web Design](https://medium.com/web-design-technique/6b51bf53743a) by Bennett Feely

**CSS Masking**

  * [CSS Masking on HTML5Rocks.com](http://www.html5rocks.com/en/tutorials/masking/adobe/) by Dirk Schulze

  * [Techniques for Creating Textured Text](http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/) by Sara Soueidan

  * [Responsive Mask](razvancaliman.com/responsive-mask-image)

  * [W3C | CSS Masking Module Level 1](http://www.w3.org/TR/css-masking-1/)