The-Web-Evolved-Sample-Chapter12.pdf

(4648 KB) Pobierz
Contents at a Glance
Contents ....................................................................................................................... v
Forewords................................................................................................................... xv
About the Authors .................................................................................................... xvi
About the Technical Reviewers .............................................................................. xvii
Acknowledgments .................................................................................................. xviii
Introduction ............................................................................................................... xix
Chapter 1: HTML5: Now, Not 2022 ............................................................................. 1
Chapter 2: Your First Plunge into HTML5 ................................................................ 19
Chapter 3: New Structural Elements ........................................................................ 43
Chapter 4: A Richer Approach to Marking Up Content .......................................... 89
Chapter 5: Rich Media ............................................................................................. 141
Chapter 6: Paving the Way for Web Applications ................................................. 189
Chapter 7: CSS3, Here and Now ............................................................................. 231
Chapter 8: Keeping Your Markup Slim Using CSS Selectors .............................. 275
Chapter 9: A Layout for Every Occasion ............................................................... 287
Chapter 10: Improving Web Typography ............................................................... 397
Chapter 11: Putting CSS3 Properties to Work ...................................................... 435
Chapter 12: Transforms, Transitions, and Animation .......................................... 499
Chapter 13: The Future of CSS or, Awesome Stuff That’s Coming .................... 581
Index.......................................................................................................................... 591
iv
Chapter 12
Transforms, Transitions, and Animation
Back in the early days of the web things weren’t really much different to now—web designers (and clients)
loved shiny new things. While the goals may not have changed, we’ve come a long way from when “Make
it pop!” equalled
<blink>, <marquee>,
or the classic “flaming logo” animated
.gif.
The mid-90s saw the introduction of two new tools for adding some sizzle—Flash and JavaScript. By the
dot-com boom they were both popular ways of achieving things that weren’t possible with HTML and CSS
alone, such as button rollovers, the beginnings of streaming video, and those googly eyes that followed
your mouse cursor around (http://j.mp/googly-eyes,
http://arc.id.au/XEyes.html).
However, with abuses like distracting animating ads, pages that were unusable without JavaScript (and
barely usable with it), and the infamous “Skip Intro” Flash movie, both technologies ended up with
something of a bad name. JavaScript has recovered, thanks to solid coding best practices (like Hijax,
(http://j.mp/js-hijax,
http://domscripting.com/blog/display/41))
and a mass of libraries. Flash also went on to
be used for great things, but with the
<video>, <audio>
and
<canvas>
elements in HTML5, its star is
waning.
Animation and user interface effects have long been a big part of Flash’s appeal. CSS3 makes many of
these abilities native in the CSS Transformations, Transitions, and Animations specifications. We’ll look at
how to use these CSS3 specifications to easily add Flash-like effects in the browser. With the addition of
hardware acceleration (especially in mobile devices), CSS3 is a viable option for adding some “wow!”
where it wasn’t possible before. Chapter 13 rounds out this book with a look at some exciting things
coming to CSS in the near future.
499
Chapter 12
Now, those of you who remember the web trifle may be saying, “Hold on. This is behavior not
presentation!” While this is true to a point, this ship already sailed with the
:hover
pseudo-class. Adding
movement to CSS3 makes these popular features far more accessible than they have been in JavaScript.
You may still choose JavaScript (or Canvas or SVG with SMIL or even Flash) for advanced animations,
but for the basics you’ve now got some wonderfully accessible tools.
Before we delve into the delicious CSS3, let’s start with two warnings.
The browser support for the CSS in this chapter ranges from pretty good to bleeding
edge. Because of this (and as usual), it’s essential to remember that some users won’t
see these effects—consider the experience of people with browsers that lack support.
As Lea Verou eloquently stated:
If you design a page with graceful degradation in mind, it should work and look fine even
without any CSS3. If you don’t, you’ll have bigger problems than that.
—
Five questions with Lea Verou,
CSS Tricks (
http://j.mp/lea-verou-5q
,
http://css-
tricks.com/five-questions-with-lea-verou/
)
“deCSS3”
(
http://j.mp/decss3-bm
,
http://davatron5000
.github.com/deCSS3/
) by Dave Rupert, Alex Sexton, Paul Irish and François Robichet,
“CSS3-Striptease”
(
http://j.mp/css3striptease
,
http://css-
tricks.com/examples/CSS3StripTease/
) by Chris Coyier, and “ToggleCSS3”
(
http://j.mp/togglecss3
,
http://intridea.com/2010/4/12/toggle-css3-bookmarklet
)
by
Michael Bleigh can help, but ideally you’re building from the content out (or “mobile first”)
anyway, and leaving adding CSS3 until the end.
The
bookmarklets
Also, these specifications are all useful for adding movement. Whether it was skip intro
movies or animating ads, we’ve all been annoyed by too much movement so remember
that feeling when adding it yourself. Make sure it assists (rather than annoys) your users
in completing their goals. Just a dash is often all you need.
So without further ado, let’s have a look at moving things with CSS3 Transforms.
Translate, rotate, scale, skew, transform: 2D and 3D
CSS transforms
Transforms give us the ability to perform basic manipulations on elements in space. We can translate
(move), rotate, scale and skew elements, as demonstrated in Figure 12-1. A transformed element doesn’t
affect other elements and can overlap them, just like with
position:absolute,
but still takes space in its
500
Transforms, Transitions, and Animation
default (un-transformed) location. This is generally a big advantage over varying an element’s
width/height/margins etc., as your layout won’t change with transforms. They’re specified in two separate
specifications:
CSS
2D
Transforms
Module
Level
3
(http://j.mp/2d-transforms,
http://dev.w3.org/csswg/css3-2d-transforms/)
and CSS 3D Transforms Module Level 3 (http://j.mp/3d-
transforms, http://dev.w3.org/csswg/css3-3d-transforms/).
Combined with transitions and animations
(which you’ll meet later this chapter) this provides some powerful tools for good … and (of course) evil!
.translate {transform: translate(-24px, -24px);}
.rotate {transform: rotate(-205deg);}
.scale {transform: scale(.75);}
.skew {transform: skewX(-18deg);}
Figure 12-1.
Examples of the 2D transforms
translate(24px, 24px), rotate(-205deg), scale(.75)
and
skew(-18deg).
The
label for each box is transformed an equal and opposite amount.
Assuming you’re on the side of good, here’s a handy overview/cheatsheet of the transform properties and
functions. Before that, however, we need to briefly touch on CSS values and units.
501

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin