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.
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-of-type() Looks for the third
- :not(:empty) - not has no value, it’s the value of what is inside the ()
- 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
When using prefixes, use them all! End with the real, un-prefixed property.
content: ' ';
- List style images
- Border images
- Background images
- Keyword transparent is a shade of black
- 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
- Multiple Transforms (all of the properties on one line but with spaces between each)
- Use prefixes on all of them
- transition-delay: how long to wait before the browser initiates the transition (50ms)
- transition: shorthand for 4 transition properties
- Properties are comma separated