O'Reilly logo

Learning Modernizr by Adam Watson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Frame 4 – animations

In this section, we will be doing the following:

  • Adding a large cloud to the frame
  • Using the old striped background as a visual object instead
  • Animating the Modernizr logo with rotation
  • Creating a new background using CSS gradients
  • Animating the miniature clouds

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required