HTML and CSS Reference
In-Depth Information
FIGURE 5.25
Simple but basic:
I moved the front by changing
the margin.
The first rule applies an updated
:hover/:focus
rule to the flip card so that, if
the browser doesn't support 2D transforms, hovering or focusing the card will just
move the front over by 350 pixels to reveal the back. The second rule provides a
simple, solid background color to replace the posh gradient background in nonsup-
porting browsers. The third rule just colors the text black, so that it is still readable
without the shadows.
This code produces the simple but usable result shown in
Figure 5.25
.
TIP:
The fallback code still won't work in IE6-7 due
to a horrible bug involving hover effects not working on
positioned elements with nontransparent background colors. See
for the solution. Go figure!
ANIMATIONS AND JAVASCRIPT
As mentioned earlier, one of the ways I foresee CSS Animations being useful is to
trigger animations via JavaScript. To demonstrate this, I created a form example.
We b d e s i g n e rs h at e co d i n g fo r m s a n d a re a l ways l o o k i n g fo r b e t t e r ways t o m a ke
them more usable, space e
cient, and consistent across browsers. So what better
way to demonstrate a decent, real-world use of animations than to code an attrac-
tive, usable form example?
To s e e t h e fi n i s h e d c To d e , c h e c k To u t a n i m at e d - fo r m . h t m l a n d a n i m at e d - fo r m .
css in the chapter5 folder. There is nothing remarkable about the HTML for this
example. The bulk of it is a very simple, four-input form with a Submit button. But
