README.md

Gradient Circus

A presentation about the inner workings of CSS gradients. There are a few variations, each with a different set of interactive slides viewable online:

• SydCSS (2015) – Slides | Video
• Decompress (2016) — Slides

Links and references

• If I Ran the Circus, by Dr Seuss
• Browser support for gradients at Can I use...
• Lea Verou’s CSS3 Patterns
• Bennett Feely’s gradient gallery
• A single div
• My open source project showcase
• Gradient Inspector Chrome extension
• conic-gradient polyfill
• Do you really know CSS linear-gradients?
• Patrick Brossett’s linear-gradient tool on CodePen
• PostCSS gradient transparency fix

Specs

• W3C: CSS Image Values and Replaced Content Module Level 3 (current)
• W3C: CSS Image Values and Replaced Content Module Level 4 (proposed)
• W3C: Compositing and Blending Level 1
• Lea Verou’s draft conic gradient spec

Demos

• How background image layering works (standalone demo extracted from this presentation, plus source code)

Slide tech

The slide deck was built using Bespoke.js with some custom plugins.

View slides locally

First, ensure you have the following installed:

1. Node.js
2. Bower: $ npm install -g bower
3. Gulp: $ npm install -g gulp

Then, install dependencies and run the preview server:

$ npm install && bower install
$ gulp serve