HTML and CSS Reference
In-Depth Information
therefore, I've forced the form to remain onscreen by setting the left property to
0 with = “0rem” .
If the Modernizr test isn't true, the browser doesn't support CSS Animations
and/or 3D transforms; therefore, I want different styling to occur when the Submit
button is clicked. To allow nonsupporting browsers to see the “Thank You” mes-
sage, I used = “5”; to set the z-index of the #back <div> to  5 ,
making it appear above everything else in the stacking order when the Submit
button is clicked. Figure 5.26 shows the three states I'm animating in between.
I've also used some simple transitions to make the help messages appear when
the form labels are hovered over/focused on:
FIGURE 5.26 The three differ-
ent states we are animating.
.extended-info {
opacity: 0;
transition: 1.5s all;
div label:hover .extended-info,div label:focus .extended-info {
: ;
Search WWH ::

Custom Search