Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Slides for my talk at New Developer Conference in London, 2014 about CSS Shapes and CSS Masking.
https://github.com/oslego/ndc-london-2014

Last synced: about 1 month ago
JSON representation

Slides for my talk at New Developer Conference in London, 2014 about CSS Shapes and CSS Masking.

Host: GitHub
URL: https://github.com/oslego/ndc-london-2014
Owner: oslego
License: mit
Created: 2014-12-02T19:04:43.000Z (about 10 years ago)
Default Branch: master
Last Pushed: 2014-12-02T19:12:35.000Z (about 10 years ago)
Last Synced: 2024-10-14T12:49:07.518Z (3 months ago)
Language: JavaScript
Size: 18.6 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Beyond Rectangles in Web Design: CSS Shapes and CSS Masking

Slides for my talk at [New Developers Conference](http://www.ndc-london.com/) in London, 2014.

This is a custom interactive slide deck meant to be shown in a controlled environment on stage. It works as expected in Google Chrome and offers decent fallbacks to keep content readable.

[Live Demo](https://oslego.github.io/ndc-london-2014) | [Static Demo (PDF)](https://speakerdeck.com/razvancaliman/beyond-rectangles-in-web-design-css-shapes-and-css-masking)

![Screenshot of slides](screenshot.png)

## Resources:

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

**CSS Shapes**

- [Getting started with CSS Shapes](http://www.html5rocks.com/en/tutorials/shapes/getting-started/)

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

- [CSS Shapes Editor for Google Chrome](https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp)

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

- [Alice in Wonderland CSS Shapes demo](http://webplatform.adobe.com/Demo-for-Alice-s-Adventures-in-Wonderland/)

**CSS Masking**

- [Introduction to CSS Masking](http://www.html5rocks.com/en/tutorials/masking/adobe/)

- [Clipping in CSS and SVG](http://sarasoueidan.com/blog/css-svg-clipping/)

- [Trekking CSS Masking demo](http://razvancaliman.com/cssmasking/)

- [Responsive masks demo](http://razvancaliman.com/responsive-mask-image/)