Date: 2016-02-21
Last Update: 2016-02-22
All the following "local notifications" include code and demos, if not a visual to demonstrate what is being produced. In addition, if code has an "outdated" notice with it, it was not included.
Example: 
- Building CSS3 Notification Boxes With Fade Animations
- CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM
These are all very similar.
Example: 
| Article | Website/Author |
|---|---|
| Notification Box – Alert Boxes using CSS | w3lessons.info |
| CSS Message Boxes for different message types | jankoatwarpspeed.com |
| CSS Notification Boxes | cssportal.com |
| Giveaway 10 CSS Notification Boxes For Free | paulund.co.uk |
| Error, Success, Warning, and Info Messages with CSS | isabelcastillo.com |
| Simple CSS notification boxes without using any icon | aviaryan.in |
| Cool Notification Messages with HTML CSS | anirbanadak.com |
| Pure CSS Notification Bars | webdesignerhut.com |
| CSS Message Notification Bars | timtrott.co.uk |
There are few stand-alone "toast" libraries, likely because they are so easy to make and it appears 'toast' can appear like 'notification box'. I'll try to find some tutorials.
Example: 
| Article | Comments |
|---|---|
| Simple JavaScript Notifications with toastr | toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. |
Badges are generally "pinned bubbles". They all look very similar.
Example: 
- Facebook Style Notification Popup using CSS and Jquery.
- Menu Notification Badges Using HTML5 Data-Attributes
- css arrow please! | This is a cool tool to generate the CSS for your Notificaton
- iPhone Notification Badge in CSS | This is from archive.org. On this date (2016-02-22), the domain had expired.
- Create a CSS Notification Badge
- Adding a badge style count indicator
- CSS snippets tagged ?Badge? - 5 examples
- iOSBadge - iOS style notification badges for modern browsers - Lots of options, but maybe too complex
- Hop Over Notification Badge - Very cool effect (codepen.io)
- iOS-Style Notification Badge - (codepen.io)
- Menu Notification Badges (PSD)
- Notification Badge Css Class
- Navigation Menu With Notifications Using CSS
Growl notifications look a look like a standard 'notification box', except that it "rolls" out from the edge of the window - usually the top.
| Article | Comments |
|---|---|
| Pop From Top Notification by Chris Coyier | A design pattern where a notification pops down from the top of the browser window, then slides away. |
| How to Make a Pure CSS Alert Bar | - |
| Auto Hide Notification Box in Blogger | - |
The Web Notifications API is defined as "an API for end-user notifications. A notification allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email." These look a like toast.
NOTE: As of this writing, permission is required from the end-user to use these notifications.
- Mozilla Notification
- An Introduction to the Web Notifications API
- Web Notifications
- Why (and How) you Should Probably Use Web Notifications
- HTML5 Web Notifications source
| Article | Comments |
|---|---|
| Notify.js | Toast like |
| Noty | create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. |
| Lobibox | Free responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages. |
| FreeNBar | Create A Responsive Top Notification Bar with jQuery and CSS3 - Freenbar.js |
- Show an Android style toast notification using HTML/CSS/JavaScript
- Easiest css for Facebook style ?red? notifications - This is a pinned bubble.
- notification-js - A dependency-free, well designed and highly customizable notification library.
- HTML5-Desktop-Notifications
- pnotify source
- UX-lab
- Notification Styles Inspiration demo
- Popup Notifications & Dialogs
- css-notification-boxes - NO DEMO
- cssscript - categories: notification
- JQueryRain - Best jQuery Notification Plugins & Tutorials with Demo
- freshdesignweb - 30+ Free jQuery CSS Notification Plugins & Tutorials
- Pusher - How To Create Realtime Notifications For HTML5 Apps
- Pubnub - How to Broadcast Desktop Chrome Push Notifications in the Browser
Google searches made:
- notifications only html css javascript
- html css notification box
- html css notification badge
- not yet css notification popup
- not yet css notification bubble
- not yet notification popup jquery
- Growl like
- not yet css notification bar
- not yet css growl notifications
- not yet growl notifications javascript
- not yet jquery growl notifications
- Alert like
- not yet alert html css javascript