Project alpha: Passbook - Trying to recreate Gmail AJAX status messages

All mock up screens were completed today. Progress is good and the project appears to be on track with about 10 hours spent so far. I spent a few hours trying to replicate Gmail's informative and non-obtrusive AJAX status messages that appear at the top of the screen. A screen shot is shown below:

As one can see it is a simple div that has the bottom corners rounded. Creating this effect was actually quite simple. The HTML needed are:

<div id="notification"><span id="notifcationContent">Loading ...</span></div>
The CSS required are:

#notification { position:fixed; top:-0.2em; text-align:center; width:100%; z-index:100; }
#notificationContent { background:#FFA; padding:0.3em 1em; font-weight:bold; }
The above code segments will create a fixed top div with centered text that has a light yellow background. This status message will be shown no matter what the vertical scroll position is. It is what I am currently using for Passbook with results below:

Getting to this stage is quite easy however recreating the final effect of the Gmail status message is not so simple. After trying out many rounded corner generation scripts the problem I found was that due to the background color being dynamic (as the user scrolls) one cannot create a flawless look similar to what Google has achieved. Google's status messages only appear to show perfectly because their top header is always there and pretty much do not move. So there status message does not always move with the page.

In the initial version of Gmail the status boxes were just simple boxes, which is now understandable, as it is the easiest to implement if constant visibility is desired. However Gmail does not need a constantly visible status display as its layout is mostly contained within a normal visible window. The few occasions where you do not view the top header is if you had a long email conversation you were viewing, at which point AJAX messages are not so necessary as the available actions to the user will have an immediate effect in the GUI anyway (reply, print, etc.).

So to conclude, if you want to recreate the Gmail AJAX status messaging display you need to incorporate a static header in your design and try to minimize page scroll. If you want your AJAX status messages to be constantly visible to the user then you will need make some aesthetic concessions.