SXSW2012: Mad CSS3 Skillz

In this one hour tutorial workshop, you will become skilled in CSS3 selectors, transforms, transitions and animations. We will work through an animation examples, creating different paths, timing and effects, exploring linear gradients opacity, alpha transparency, border-radius, text-shadows, transforms, transitions and mostly animations. The code example will be provided participants can play with the code, going from novice to skilled without heavy note taking.

http://estelle.github.com/sxsw
http://estelle.github.com/html5mobile/css.html
http://Standardista.com
Hash tag: #css3
http://schedule.sxsw.com/2012/events/event_IAP10913

Making it snow without JavaScript

Structural Selectors are Powerful! Use them.

  • :nth-child () Looks for the third element and evaluates whether or not it is the element that you specified
  • :nth-last-child()
  • :nth-of-type() Looks for the third
  • :not(:empty) - not has no value, it’s the value of what is inside the ()

Examples:

  • nth-child(even) / (odd) - can be used for striping tables
  • CSS Tricks - play with nth selectors - simple math
  • ::selection (for highlighting)
  • -moz needs to be added for selection
  • Selectivizer

When using prefixes, use them all! End with the real, un-prefixed property.

Generated Content:

.foo:after {
content: ' ';
}

Linear Gradient

  • List style images
  • Border images
  • Background images
  • Keyword transparent is a shade of black

Radial Gradients

  • Be careful on mobile devices
  • Gradient Libraries and tools in slide deck.

Opacity and Transparency

    Applies to all child elements
  • Probably want to use AlphaTransparency in RGBa
  • HSLa (Hue, Saturation, Lightness and transparency)
  • Use with shadows to make it more realistic

Border Radius

  • .circle
  • .oval
  • .different
  • .elliptical

Transforms

  • Translate
  • Rotate
  • Scale
  • Skew
  • Multiple Transforms (all of the properties on one line but with spaces between each)
  • Use prefixes on all of them

Transitions

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay: how long to wait before the browser initiates the transition (50ms)
  • transition: shorthand for 4 transition properties
  • Properties are comma separated

Animation

  • Keyframes

 

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins