Fun and Games with CSS3

a little about me

Chris Ruppel

Now: frontend developer at Four Kitchens

Then: digital video editing,
           post-production,
           3D modeling / rendering

Meanwhile, 2013 in the the gaming industry...

Graphics on the web had pretty humble beginnings.


CSS

Butcher four loko actually DIY, vegan fixie fashion axe. Single-origin coffee blog sustainable retro brooklyn. SXSW leggings hoodie lo-fi, blue bottle cray helvetica post-ironic 8-bit salvia PBR. Readymade umami wolf retro truffaut sartorial, mcsweeney's flannel.

Fanny pack +1, typewriter pop-up CSS4 keffiyeh mlkshk try-hard fingerstache tumblr fap blog farm-to-table. Banksy you probably haven't heard of them seitan fanny pack mlkshk. Truffaut beard craft beer keffiyeh butcher street art.

So, what is CSS3?

Well, the full list is here: http://www.w3.org/TR/#tr_CSS

Here's the stuff that's finished:

  • Document Object Model (DOM) Level 2 Style Specification
  • Cascading Style Sheets (CSS1) Level 1 Specification
  • Associating Style Sheets with XML documents 1.0 (Second Edition)
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  • CSS Color Module Level 3
  • A MathML for CSS Profile
  • CSS Namespaces Module
  • Selectors Level 3
  • Media Queries
  • Selectors API Level 1

We're covering a handful right now:

Here's the stuff that isn't:

  • CSS3 module: line
  • CSS TV Profile 1.0
  • CSS3 Generated and Replaced Content Module
  • CSS3 module: Presentation Levels
  • CSS3 module: Syntax
  • CSS3 Hyperlink Presentation Module
  • The CSS 'Reader' Media Type
  • CSS3 Module: Paged Media
  • CSS Print Profile
  • CSS basic box model
  • CSS Grid Positioning Module Level 3
  • Behavioral Extensions to CSS
  • CSS Marquee Module Level 3
  • CSS Mobile Profile 2.0
  • CSS Style Attributes
  • CSS Multi-column Layout Module
  • CSS Lists and Counters Module Level 3
  • CSS3 Ruby Module
  • CSSOM
  • CSSOM View Module
  • CSS Device Adaptation
  • CSS Generated Content for Paged Media Module
  • CSS Template Layout Module
  • CSS Basic User Interface Module Level 3 (CSS3 UI)
  • CSS Positioned Layout Module Level 3
  • CSS Speech Module
  • CSS Variables Module Level 1
  • CSS Image Values and Replaced Content Module Level 3
  • CSS Exclusions and Shapes Module Level 3
  • CSS Box Alignment Module Level 3
  • Selectors API Level 2
  • Fullscreen
  • CSS Backgrounds and Borders Module Level 3
  • Compositing and Blending 1.0
  • CSS Fragmentation Module Level 3
  • CSS Regions Module Level 3
  • Selectors Level 4
  • CSS Values and Units Module Level 3
  • CSS Transforms
  • CSS Image Values and Replaced Content Module Level 4
  • CSS Flexible Box Layout Module
  • CSS Intrinsic & Extrinsic Sizing Module Level 3
  • Filter Effects 1.0
  • CSS Grid Layout
  • CSS Text Module Level 3
  • CSS Masking
  • CSS Writing Modes Module Level 3
  • CSS Conditional Rules Module Level 3
  • CSS Text Decoration Module Level 3
  • CSS Cascading and Inheritance Level 3
  • CSS Fonts Module Level 3
  • CSS Transitions
  • CSS Animations
  • CSS Counter Styles Level 3

See how CSS 2.1 is included in CSS3?

That means all CSS is CSS3

This demo requires... 3D Transforms Filters 2D Transforms Animations Transitions

Time for fun stuff!

Each demo has a compatibility chart in the corner.

If you see any red, your browser doesn't support that feature yet.

Let browser makers know it's something you're interested in:

Transforms

This demo requires... 3D Transforms Animations

3D Transforms are inherited by children.
You can think of nested elements

This demo requires... 3D Transforms Transitions Animations

You can use 3D Transform inheritance to simulate complex objects

This slinky is not a spiral, but numerous nested <div>s

This demo requires... 3D Transforms Transitions

You can also incorporate transformed elements into images.

If you can read this, it means your browser cannot process the 3D transforms on this page.
There's no good fallback behavior, so I put this message here to let you know what happened.
This demo requires... 3D Transforms Transitions

Sometimes, it's all about...

PERSPECTIVE

Butcher four loko actually DIY, vegan fixie fashion axe. Single-origin coffee blog sustainable retro brooklyn. SXSW leggings hoodie lo-fi, blue bottle cray helvetica post-ironic 8-bit salvia PBR. Readymade umami wolf retro truffaut sartorial, mcsweeney's flannel.

Fanny pack +1, typewriter pop-up CSS4 keffiyeh mlkshk try-hard fingerstache tumblr fap blog farm-to-table. Banksy you probably haven't heard of them seitan fanny pack mlkshk. Truffaut beard craft beer keffiyeh butcher street art.

Pug marfa raw denim, helvetica meh carles vice aesthetic. Polaroid pop-up echo park portland authentic. Whatever tonx chillwave keffiyeh thundercats bespoke, cray literally cardigan quinoa PBR. Seitan chambray mumblecore, street art neutra biodiesel yr keffiyeh synth occupy freegan leggings cred artisan.

Speaking of space, a solar system is easy too.
Orbit paths are inherited by each child.

This demo requires... Animations 2D Transforms

animation-delay can be used with nth-child

Optical Illusions

This demo requires... Animations Filters 3D Transforms

Ames window is a perspective illusion.

This is a flat, trapezoid shape even though it appears to be a rectangle tilted at an angle.

It is rotating in a circle. Really.

This demo requires... Animations Filters 2D Transforms

Moiré patterns are formed by slightly mis-aligning identical patterns

This demo requires... Transitions Filters 3D Transforms

Since 3D transforms are perfect, you can use them to hide information that is near-impossible to conceal in real life.

Fun references

Fun demos

the beginning