12 ms·

Cool notification messages with CSS3 & Jquery

194 points by redmaniack 15y ago

In this article, you’ll learn how to create some cool notification messages with CSS3 and Jquery.

SnowLprd 15y ago
The article says the animated background diagonal stripes are visible in WebKit-based browsers, but I'm not seeing them in Safari 5.0.5 -- just in case that's of interest to the devs and perhaps to other folks as well.
- talmand 15y ago
  I see them animate in Chrome but I don't see the stripes at all in Safari on Windows7.
lovskogen 15y ago
Don't make the same mistake as Twitter, putting status notifications above navigation or other crucial elements. Disabling functionality due to a temporary notice is not good design.
- Kudos 15y ago
  The notifications are dismissable with a click, I don't think it's a big deal once you figure that out.
  - pixeloution 15y ago
    Very poor UX design then because there's nothing which indicates this would be the case, and no general understanding that clicking things makes them vanish.
    - a3camero 15y ago
      It would be better with at least a close button in the top right that indicates that you can close it.
      - lovskogen 15y ago
        That's not good enough. Not in my UX book at least.
  - lovskogen 15y ago
    + it's a waste of time, and clicks.
- Silhouette 15y ago
  Then again, neither is pushing the entire page down for a notice at the top of the screen, and then moving everything after a couple of seconds just as the user is about to click on a button/link/whatever. It's amazing how many sites (and browsers!) currently do this particular stupid thing.
  - leftnode 15y ago
    Yes, this 1000x over. I hate it when you have a huge DOM being pushed down by 20px for a notification, go to click on a button just as the notification is closing itself. I much prefer the notification to come down from the top, have slight transparency to show covered elements, and then a way to easily close it. Very similar to the demo.
    - lovskogen 15y ago
      Not pushing down DOM or obfuscating the navigation is not a hard design to make.
keyle 15y ago
There are a few... Ie. http://boedesign.com/demos/gritter/ http://boedesign.com/demos/gritter/
- Newky 15y ago
  Prefer this, less intrusive and nicer design! Its a carbon copy of the Ubuntu notification system, (the regular notification which fades after timeout) I think a system of notifications like this integrated into the chrome browser would be a real addition, as the popups now aren't all that nice to look at!
  - lovskogen 15y ago
    Which again is a 'carbon copy' of Growl, and etc.
- Huppie 15y ago
  Hey, thanks! I like this, it looks nice, and it actually got a license that let me use it instead of '© Copyright Red Team Design' :-)
- Swannie 15y ago
  Agreed that this is a much better alternative than the one in the OP. I don't quite see why the OP is getting so many upvotes when the UX really isn't very nice.
  - joshuacc 15y ago
    I think this depends on your use case. For the technically savvy, growl-style notifications are great. For a less technical audience, "more intrusive" notifications may be exactly what you need to make sure that the users actually see them.
    - Swannie 15y ago
      I have to disagree that they are not suitable for the "non technically savvy". Programs like ICQ, Zone Alarm, MSN Messenger, Yahoo Messenger, Skype, Windows Update, etc. have been doing bottom right "pop up, on top" notifications since Windows 95. Top right pop down isn't a very far removal from this. I do agree that sometimes more intrusive notifications may be what you require, but don't think that the "top of page/app banner" is often the right use case. The best use case I can think of are control systems, where the screen starts turning red, with the main warning message at the top or the bottom. But this is done to allow the operator to see the entire screen to assess the state of the plant/system, with minimal screen estate taken away, and to allow immediate remedy (which of itself will probably remove the alarm condition, rather than the operator manually dismissing).
MatthewPhillips 15y ago
We need a shim to use HTML5 notifications by default and fallback to something like this when notifications are not supported.
- Kudos 15y ago
  No we don't. HTML5 desktop notifications do not serve the same purpose as this.
BobsonU 15y ago
I don't like it, also I'm pretty sure it isn't new. Stack Overflow has something similar, but it also pushes the page down as to not cover the topmost navigation.
- emp_ 15y ago
  Which can lead to misclicks since then you were trying to reach has simply moved. But, when you click a link from google, the message appears over the navigation for logged in users, so maybe they dropped that behavior?
- bmj 15y ago
  Yeah, SO's notifications are similar. I think the shiny-ness of this technique is the gradient background images.
hackermom 15y ago
Needs moar jQuery.
grk 15y ago
This made Google Chrome Renderer eat 20% cpu, so no thanks.
vailripper 15y ago
Not bad, but I don't think I'd want to use something like this very frequently, as it's fairly intrusive. We typically use Pines Notifications for most of our work. Very flexible. http://pines.sourceforge.net/pnotify/ http://pines.sourceforge.net/pnotify/
- nitrogen 15y ago
  I personally have a strong dislike for the Ubuntu-style notifications that can't be dismissed by clicking a close button, which Pines appears to use. My position is this: this is my desktop, if I want the notification closed, let me close the notification! Now, with that rant out of the way, thanks for the link to another useful web notification tool.
  - crcastle 15y ago
    the pines notifications have an 'x' to close them when you hover over the notification with your mouse. is that not what you meant by the ability to close them?
    - nitrogen 15y ago
      At least on Firefox 5 on Ubuntu 11.04, the initial Pines page displays an Ubuntu-style notification at the top right of the page which becomes mostly transparent when hovered. This notification does not display an X, with or without hovering. Perhaps Pines changes notification style based on the detected operating system?
redmaniack 15y ago
Thanks guys for your valuable feedback. I just updated the article and demo: -Added CSS3 animation support for Mozilla 5+ -Fixed flickering the proper CSS3 animation -CSS3 gradients syntax updated. Now, Safari also renders background stripes. Once again thanks for your comments! Catalin
alanh 15y ago
Why would there be a warning-stripe background to the info & success variants? That doesn’t make any sense. Especially to colorblind users.
- mark_story 15y ago
  I found the animated stripes to impede the readability of the text. I agree the various notifications would be hard to separate for colour blind people. One could add some icons to indicate the type of message though.

194 points by redmaniack 15y ago

In this article, you’ll learn how to create some cool notification messages with CSS3 and Jquery.

The article says the animated background diagonal stripes are visible in WebKit-based browsers, but I'm not seeing them in Safari 5.0.5 -- just in case that's of interest to the devs and perhaps to other folks as well.

talmand 15y ago
I see them animate in Chrome but I don't see the stripes at all in Safari on Windows7.

lovskogen 15y ago

Don't make the same mistake as Twitter, putting status notifications above navigation or other crucial elements. Disabling functionality due to a temporary notice is not good design.

Kudos 15y ago
The notifications are dismissable with a click, I don't think it's a big deal once you figure that out.
- pixeloution 15y ago
  Very poor UX design then because there's nothing which indicates this would be the case, and no general understanding that clicking things makes them vanish.
  - a3camero 15y ago
    It would be better with at least a close button in the top right that indicates that you can close it.
    - lovskogen 15y ago
      That's not good enough. Not in my UX book at least.
- lovskogen 15y ago
  + it's a waste of time, and clicks.
Silhouette 15y ago
Then again, neither is pushing the entire page down for a notice at the top of the screen, and then moving everything after a couple of seconds just as the user is about to click on a button/link/whatever. It's amazing how many sites (and browsers!) currently do this particular stupid thing.
- leftnode 15y ago
  Yes, this 1000x over. I hate it when you have a huge DOM being pushed down by 20px for a notification, go to click on a button just as the notification is closing itself. I much prefer the notification to come down from the top, have slight transparency to show covered elements, and then a way to easily close it. Very similar to the demo.
  - lovskogen 15y ago
    Not pushing down DOM or obfuscating the navigation is not a hard design to make.

keyle 15y ago

There are a few... Ie. http://boedesign.com/demos/gritter/ http://boedesign.com/demos/gritter/

Newky 15y ago
Prefer this, less intrusive and nicer design! Its a carbon copy of the Ubuntu notification system, (the regular notification which fades after timeout) I think a system of notifications like this integrated into the chrome browser would be a real addition, as the popups now aren't all that nice to look at!
- lovskogen 15y ago
  Which again is a 'carbon copy' of Growl, and etc.
Huppie 15y ago
Hey, thanks! I like this, it looks nice, and it actually got a license that let me use it instead of '© Copyright Red Team Design' :-)
Swannie 15y ago
Agreed that this is a much better alternative than the one in the OP. I don't quite see why the OP is getting so many upvotes when the UX really isn't very nice.
- joshuacc 15y ago
  I think this depends on your use case. For the technically savvy, growl-style notifications are great. For a less technical audience, "more intrusive" notifications may be exactly what you need to make sure that the users actually see them.
  - Swannie 15y ago
    I have to disagree that they are not suitable for the "non technically savvy". Programs like ICQ, Zone Alarm, MSN Messenger, Yahoo Messenger, Skype, Windows Update, etc. have been doing bottom right "pop up, on top" notifications since Windows 95. Top right pop down isn't a very far removal from this. I do agree that sometimes more intrusive notifications may be what you require, but don't think that the "top of page/app banner" is often the right use case. The best use case I can think of are control systems, where the screen starts turning red, with the main warning message at the top or the bottom. But this is done to allow the operator to see the entire screen to assess the state of the plant/system, with minimal screen estate taken away, and to allow immediate remedy (which of itself will probably remove the alarm condition, rather than the operator manually dismissing).

MatthewPhillips 15y ago

We need a shim to use HTML5 notifications by default and fallback to something like this when notifications are not supported.

Kudos 15y ago
No we don't. HTML5 desktop notifications do not serve the same purpose as this.

BobsonU 15y ago

I don't like it, also I'm pretty sure it isn't new. Stack Overflow has something similar, but it also pushes the page down as to not cover the topmost navigation.

emp_ 15y ago
Which can lead to misclicks since then you were trying to reach has simply moved. But, when you click a link from google, the message appears over the navigation for logged in users, so maybe they dropped that behavior?
bmj 15y ago
Yeah, SO's notifications are similar. I think the shiny-ness of this technique is the gradient background images.

hackermom 15y ago

Needs moar jQuery.

grk 15y ago

This made Google Chrome Renderer eat 20% cpu, so no thanks.

vailripper 15y ago

Not bad, but I don't think I'd want to use something like this very frequently, as it's fairly intrusive. We typically use Pines Notifications for most of our work. Very flexible. http://pines.sourceforge.net/pnotify/ http://pines.sourceforge.net/pnotify/

nitrogen 15y ago
I personally have a strong dislike for the Ubuntu-style notifications that can't be dismissed by clicking a close button, which Pines appears to use. My position is this: this is my desktop, if I want the notification closed, let me close the notification! Now, with that rant out of the way, thanks for the link to another useful web notification tool.
- crcastle 15y ago
  the pines notifications have an 'x' to close them when you hover over the notification with your mouse. is that not what you meant by the ability to close them?
  - nitrogen 15y ago
    At least on Firefox 5 on Ubuntu 11.04, the initial Pines page displays an Ubuntu-style notification at the top right of the page which becomes mostly transparent when hovered. This notification does not display an X, with or without hovering. Perhaps Pines changes notification style based on the detected operating system?

redmaniack 15y ago

Thanks guys for your valuable feedback. I just updated the article and demo: -Added CSS3 animation support for Mozilla 5+ -Fixed flickering the proper CSS3 animation -CSS3 gradients syntax updated. Now, Safari also renders background stripes. Once again thanks for your comments! Catalin

alanh 15y ago

Why would there be a warning-stripe background to the info & success variants? That doesn’t make any sense. Especially to colorblind users.

mark_story 15y ago
I found the animated stripes to impede the readability of the text. I agree the various notifications would be hard to separate for colour blind people. One could add some icons to indicate the type of message though.