Fun and Games with CSS3

Use the ‹ and › keys
to advance backward and forward.

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 much like paper folds

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

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.

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 and Games with CSS3

So, what is CSS3?

Time for fun stuff!

Transforms

Optical Illusions

Fun references

Fun demos

the beginning