BitmapCake!

Gmail notifications css style.

I am working on an interesting project these days. There is this page where I have to display loading messages, success notifications etc. So I decided to make that notification box somewhat similar to the Gmail's notifications box.  The main reason I wanted to make this similar to the Gmail's one is because its so easy to read, and the notifications are not disturbing the user. They look pretty cool, and simple.

I guess you might already have seen these notifications in Gmail so many times? If not check the image above.

Today I'm going to show you how you can create this notification style using css. It's a very simple thing. Let's Start. Here is the css, and there's nothing to explain. :)

.notify-outer {
    left: 0;
    top: 0;
    margin: 0;
    font-family: arial, sans-serif;
    font-weight: bold;
    visibility: hidden;
    z-index: 8;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
}

.notify -msg-box {
    position: relative;
    display: inline-block;
    visibility: hidden;
    font-size: 80%;
    padding: 6px 10px;
    background-color: #f9edbe;
    border: 1px solid #f0c36d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    top: -15px;
}

Here is how to use it. You will have to make changes according to your requirements. I change the text of the span #msg dynamically using Jquery. So I have made the notifications hidden by default.

<div class="notify-outer ">
    <div class="notify -msg-box">
       <span id="msg" style="display:none;"></span>
    </div>
</div>

Please feel free to share your thoughts on this. If you think this will be useful to your friends, please consider sharing this post over Google+, Facebook, Twitter etc.