In this section, we will be doing the following:

In this frame, we'll be adding some finishing touches and playing around a bit with what we already have. The first thing I'm going to do is add another cloud to the frame that will act as a centerpiece. It's going to reside just behind the title but in front of the smaller clouds.

I am also going to remove the previous shadows and instead have a single shadow beneath the main cloud.

The HTML for frame 4 will be as follows:

<div id="frame-4" class="frame">
  <h1 class="title">Modernizr</h1>
  <h2 class="subtitle">Making it rain progressive experiences.</h2>  

  <div class="mini-cloud mini-cloud-l">  <span class="shadow"></span>
  </div>

  <div class="mini-cloud mini-cloud-r">
  <span class="shadow"></span>
  </div>

  <div id="modernizr-logo">
   <img src="images/modernizr-logo.png">

   <div class="shape-wrap">
   <span class="block block-1"></span>
   <span class="block block-2"></span>
   <span class="block block-3"></span>
   </div>
  <div class="curve-contain">
  <span class="curve"></span>
  </div>
  </div>

  <div class="rain-drops">
   <div class="rainbg"></div>
  </div>	
  
 <div class="cssCloud" >
 <span class="shadow"></span>
 </div>
</div>

The large cloud has been added at the very end of the frame as follows:

<div class="cssCloud" >
 <span class="shadow"></span>
</div>

We don't actually have to do anything new here because we styled all of this in the previous frame 3 and scaled it down. Here in this frame we show it at the original scale, complete with shadow.

Also, you'll notice the addition of a rain-drops div with a rainbg div nested inside. We're going to be using this in not just this frame but the final frame as well. For this frame we will be taking the striped background used in the earlier frames and use it instead as a visual effect by also combining it with box shadow as well.

In place of the previous background we'll still be using gradients, but minus the striped bars. The CSS for both is as follows:

#frame-4,
#frame-5{
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 51, 71, 1)), color-stop(50%, rgba(23, 255, 218, 0)), color-stop(70%, rgba(23, 255, 218, 0)),color-stop(66%, rgba(23, 255, 255, 0)),to(rgba(51, 51, 51,0.8) ));

}

#frame-4 .rainbg,
#frame-5 .rainbg{

  height: 65px;
  width: 100%;
  position: absolute;

  background-image: -webkit-linear-gradient(0deg,rgba(135, 175, 195, 0.3) 50%, rgba(215, 225, 235, 0.6) 50%);
  background-size: 5px;

  -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,1)));
}

If we take a look in the browser we now have a vibrant gradient background in place of the previous striped one. Additionally, the striped background is now gone and its place is a visual element representing rain. We can see these changes in the following screenshot:

As you have probably noticed, in each frame we show a method for detecting features to be used in the frame at that particular time, but in subsequent frames we'll often statically add those features in with the assumption that we had already detected them. The cssCloud class in frame 4, for example. We're doing this mostly to save your eyeballs from having to stare at an overly redundant sequence of code, and to instead distill each individual idea as the best possible one. I think it's most important in these exercises to illustrate the concepts and possibilities, as opposed to following the letter of the law in every frame as we are covering a great deal of information.

In these final two frames, I am going to be bypassing illustrating feature detection and getting right down to brass tacks. I am doing this because frames 4 and 5 are representations of the more advanced, latest, and greatest browser features. Also, we have covered all of the bases pretty well as to how one would go about checking first for these features, and again it would be a bit redundant as this frame thus far uses features we have already tested for in previous exercises. There is however one final feature not yet covered, animation, which we will be exploring now.

Animating the clouds

Let's add a subtle animation to mini clouds by making them roll back and forth as though they are blowing in the wind. The first step is to define the CSS, beginning with the keyframe definitions as shown in the following code snippet:

/* The left mini cloud. */
@-webkit-keyframes cloud-l{

  from{ left: 25% }
  to{ left: 20%;}
}


/* The right mini cloud. */
@-webkit-keyframes cloud-r{

  from{ left: 50% }
  to{ left: 55%;}
}

The clouds are going to shift gently back and forth 5 percent from their current position. We'll of course have to add the rest of the animation parameters to the previous classes as well, using the following code snippet:

/* Animation params for the right cloud */
.cssanimations #frame-4 .mini-cloud-r{

  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode:both;
  -webkit-animation-delay: 5s;	
  -webkit-animation-name: cloud-r;
}

/* Animation params for the left cloud */
.cssanimations #frame-4 .mini-cloud-l{

  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode:both;
  -webkit-animation-delay: 2s;
  -webkit-animation-name: cloud-l;
}

As you can see, in frame 4 if cssanimations is available the clouds will rock gently back and forth across the page.

How about we do one last animation example and make the logo spin, much like a coin on its edge?

We can use the following code snippet to do this:

/* The animation for the logo spin. */
@-webkit-keyframes "logo-spin" {

  from { -webkit-transform: rotateY(0deg); }
    to   { -webkit-transform: rotateY(-360deg); }
}
.cssanimations #logo .logo-inner .circle{

  -webkit-animation-name: logo-spin;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 25s;	
}

Our screen should look something like the following: