Warning: This Secret CSS Technique Will Surprise You!

Step 5. Export Frame 1

Switch on both the Frame 1 layer and the blue grid layer, then launch Firework’s Export Preview screen (CTRL+ALT+X).

Set your export format to GIF and use the Eyedropper tool to select the fluoro blue color chip from our color palette.

Hit the EXPORT button, call the image Frame1.gif, and put it somewhere safe.

Step 6. Export Frame 2.

Switch your layers so that the second frame shows. Now very carefully select the grid layer and use the arrow keys to move it exactly one pixel to the left. Take special care here, because if you bump or drag the grid accidentally, it will become “out of phase” with our first frame, meaning you’ll need to repeat Step 5. Export the image as Frame2.gif, once again making the blue color chip transparent.

Step 7. Export Frame 3.

You’re probably able to guess this step now. Make the frame 3 layer visible, and once again carefully jog the blue grid one pixel to the left. Export the result and call it Frame3.gif. You should now have three new images that are essentially “lacework” copies of our animation frames.

Step 8. Combine the images into a composite.

This is where you find out if you were careful enough in the previous steps.
Open all three of your freshly exported frames. Copy Frame2.gif and paste it into Frame1.gif. Do the same with Frame3.gif. If everything has gone to plan, the three frames should knit together perfectly, as the image below shows.

Getting this image just right is the key to this technique, and it’s easy to make mistakes. Don’t give up if it doesn’t quite line up the first time. It took me some time to get it right. Export this composite image to a single file (I called mine stormy-sea.jpg).

Step 8. Create the HTML structure.

Okay, if you got this far, award yourself a gold star for bloody-minded persistence! Now, start a new HTML document and add the following markup to the body:

<div id="header_outer">  
<div id="header_inner">  
<h1>Here is the Header</h1>  
</div>  
</div>

This is very simple structure—simply two DIVs wrapping an H1.

Step 9. Add the CSS.

Finally, add the following CSS to the HEAD:

<style type="text/css">  
#header_outer {  
background:#000 url(images/stormy-sea.jpg) left top no-repeat;  
}  
#header_inner {  
background: transparent url(images/bigw.gif) right top;  
border-top:1px solid #000;  
height:200px;  
position:relative  
}  
h1 {  
color:#fff;  
position:absolute;  
bottom:0px;  
left:1em;  
font-size:400%  
}  
</style>

The outer DIV holds our composite animation image in its background and is aligned to the top left, so it won’t move when we resize the browser.
The inner DIV contains our black Peekaboo Grid, and is always aligned to the top right. This means that when we resize the browser, our grid always slides sideways across our composite image. The basic page should look like something like this.

Final Word

So, there it is. If you managed to slog your way through to create your own version, I doff my hat to you. Producing the composite graphic seems more like an act of faith than a graphics technique.

Unfortunately, at the moment I can’t think of a simpler way to do it, short of writing a custom application designed to generate the image automatically. In my testing I generally found that strongly loop-based animations (i.e. things like wheels, spinning gears or running horse) aren’t as effective.

While turning a page produces a very smooth, measured motion, resizing a browser is typically much jerkier, making it much more likely you’ll skip over frames. Instead, animations that actually benefit from a certain amount of randomness seem to work best. For instance:

• twinkling stars
• headlights on a distant highway
• lights on a city skyline
• reflections glittering off the water
• insects buzzing around a light

Obviously, some will question whether they could justify the time and resources to develop an effect that might not even be seen by all users. No doubt many budgets and projects wouldn’t be suited to this type of trick. But there may be other projects that would benefit from a variation on this method, and the opportunity to surprise and intrigue your users—to cut through the clutter for a moment—isn’t to be underestimated.

P.S. I’d love to see anyone else’s experiments with this idea, so drop me a note if you come up with something cool.