SXSW 2013: Fun & Games with CSS3

Chris Ruppel
Frontend Developer
Four Kitchens

Presentation Description

Chris Ruppel demonstrates some bleeding-edge creative concepts you can achieve using CSS3. Examples aren’t as practical as they are inspiring, showing off the possibilities of CSS3 and touching on components like animation, media queries, masks, transforms, transitions, filters, shaders, and 3D.

The audience should walk away with excitement, new awareness, and the desire to implement some of this awesome eye candy in a practical manner.

Presentation Note

We shouldn’t be calling it CSS3, as it is just CSS with modules. One of the modules just happens to be CSS2.1, which encompasses all of the existing styles.

Transforms

3D Transforms can be a little complex, but what is cool about them is they are inherited by their children just like other CSS properties.

Make sure to do all of your 3D Transforms with ems, as it will change monitor to monitor.

  • Translate (moving on x, y, z)
  • Rotate (x, y, z)
  • transform-style
  • perspective: an integer representing distance from camera, measured in px.
  • perspective-origin: vanishing point of the perspective effect
  • translate()
  • rotate()
  • backface-visibility: specifies if you can see this element when it is not facing you. A polygon traditionally in 3D rendering is off by default. However, with CSS3 they have enabled it by default.

Resources

Posted in SXSW 2013.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>