HTML and CSS Reference
In-Depth Information
transition-duration value in seconds (ā€œsā€ is the unit), since the default
time a transition takes is 0 seconds. You can add them both in the
transition shorthand property. You can also specify a delay or a timing
function to more finely tune how the two values switch.
Beyond transitions, full-fledged animations with multiple keyframes are also
possible with CSS3 (but currently only supported in Safari/Chrome). First,
you give the animation a name and define what the animation will do at
di " erent points (keyframes, indicated with percentages) through its duration.
Next, you apply this animation to an element using the animation-name,
animation-duration, and animation-interation-count
properties. You could also set a delay and timing function, just like with
transitions.
CSS3 USABILITY / READABILITY ENHANCEMENTS
Most the CSS3 techniques we've gone over so far have been purely
cosmetic e " ects that aid progressive enhancement. But CSS3 can also be
used to improve the usability of your pages.
Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability
Some pieces of text are more readable in narrow, side-by-side columns,
similar to traditional newspaper layout. You can tell the browser to arrange
your text into columns by either defining a width for each column (the
column-width property) or by defining a number of columns (the
column-count property). Other new properties let you control gutters/
gaps, rule lines, breaking between columns and spanning across columns.
(For now, you need to use the browser-specific prefixes of -moz and -
webkit . ) This is another one of those techniques that can harm instead of
Search WWH ::




Custom Search