[ SXSW Bios ] #sxsw #css3 (Archive)
Brief
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.
Notes
View: The slide deck! The more in-depth slide deck on HTML5 and mobile!
Visit: Estelle’s web site!
Put all the browser vendor prefixes if you are adopting CSS3, put the un-prefixed property last in the cascade.
Structural Selectors
- :nth-child(index) — explicitly selects the indexed element and only applies if that matches the prefix entity (element, class, id, etc); index can also use keywords even|odd; index can also be algebraic expression (e.g., 4n = select every 4th element, 3n-1 = select the element before every 3rd element), useful for pseudo-randomization
- :nth-last-child()
- :nth-of-type(index) — selects the indexed element that matches the prefix entity
- :nth-last-of-type()
- :first-child — more performant than :last-child
- :last-child
- :first-of-type
- :last-of-type
- :only-child
- :root
- :empty
- :not(selector) — selector cannot be complex (multiple elements)
Attribute Selectors
- input[placeholder]
- input[type=email]
- abbr[title~=unicorn]
- abbr[title|=en]
- a[href*=mailto] — starts with
- a[href$=pdf] — ends with
- abbr…
More Selectors (pseudo-elements, state elements)
- ::before
- ::after
- ::selection
- :enabled
- :disabled
- :checked
- :valid
- :invalid
- :optional
- :required
- :target
- :not(s)
- E > F — descendant (child)
- E + F — adjacent (sibling)
- E ~ F – sibling
Gradients
Use percentages if you don’t know the size of your element, use pixels if you are setting the background-size property.
- background-image: linear-gradient(direction(“top”, angle), top-color color-stop%,bottom-color color-stop%)
- background-image: radial-gradient(direction(“top”, angle), top-color color-stop%,bottom-color color-stop%) — avoid on mobile unless it is simple
Opacity
Affects child elements. So what we want to use instead is Alpha Transparency (rgba(), hsla(), etc.). a = {0…1} [ support starts with IE9 ]. Yet another vote for hsla() as easier to find the right color. Great to use when building shadows.
Borders
border-radius: 50% = full circle if square height is same as square width. different? you get an oval.
Transform
Put all the properties in a single transform: line (e.g., transform: translate() rotate() scale() skew();).