Ajax Loader
HTML 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
1
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2
 
3
<div id="notifications">
4
  <div class="notification">
5
  <img src="http://cssdeck.com/uploads/media/items/2/2nifRaa.png"/>
6
  <p>This is the HUD notification style. The only image used is for the icon.</p>
7
  </div>
8
</div>
 
CSS 
body {
1
body {
2
  overflow: hidden;
3
  background: url(http://subtlepatterns.com/patterns/diamond_upholstery.png);
4
  height: 550px;
5
}
6
 
7
#notifications {
8
  width: 322px;
9
  position: relative;
10
  margin: 20px auto;
11
}
12
 
13
.notification {
14
  font-family: "Lucida Grande", Helvetica, sans-serif;
15
  font-size: 13px;
16
  line-height: 1.2em;
17
  position: relative;
18
  padding: 10px;
19
  color: white;
20
  margin-bottom: 20px;
21
  -webkit-font-smoothing: antialiased;
22
  border-radius: 8px;
23
  text-shadow: 0 -1px 0 black;
24
 
25
  background: -webkit-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -webkit-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
26
  background: -moz-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -moz-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
27
  background: radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
28
  background: -webkit-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -webkit-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
29
  background: -moz-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -moz-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
30
  background: radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
31
  background: -webkit-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -webkit-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
32
  background: -moz-radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), -moz-linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
33
  background: radial-gradient(40% 15%, circle farthest-side, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%), linear-gradient(top, rgba(100,100,100,0.85), rgba(0,0,0,0.85) 30%);
34
  border-width: 1px;
35
  border-style: solid;
36
  border-color: rgba(255,255,255,0.6) rgba(255,255,255,0.2) rgba(0,0,0,0.5) rgba(255,255,255,0.2);
37
 
38
  -webkit-box-shadow: 0 0 2px black, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.35);
39
  box-shadow: 0 0 2px black, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.35);
40
 
41
  -webkit-animation-name: notification;
42
  -moz-animation-name: notification;
43
  animation-name: notification;
44
  -webkit-animation-duration: 0.5s;
45
  -moz-animation-duration: 0.5s;
46
  animation-duration: 0.5s;
47
 
48
  -webkit-animation-iteration-count: 1;
49
  -moz-animation-iteration-count: 1;
50
  animation-iteration-count: 1;
51
 
52
  -webkit-animation-timing-function: ease-out;
53
  -moz-animation-timing-function: ease-out;
54
  animation-timing-function: ease-out;
55
}
56
 
57
@keyframes "notification" {
58
 from {
59
    top: 20px;
60
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
61
    filter: alpha(opacity=0);
62
    opacity: 0;
63
 }
64
 to {
65
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
66
    filter: alpha(opacity=100);
67
    opacity: 1;
68
    top: 0;
69
 }
70
 
71
}
72
 
73
@-moz-keyframes notification {
74
 from {
75
   top: 20px;
76
   filter: alpha(opacity=0);
77
   opacity: 0;
78
 }
79
 to {
80
   filter: alpha(opacity=100);
81
   opacity: 1;
82
   top: 0;
83
 }
84
 
85
}
86
 
87
@-webkit-keyframes "notification" {
88
 from {
89
   top: 20px;
90
   filter: alpha(opacity=0);
91
   opacity: 0;
92
 }
93
 to {
94
   filter: alpha(opacity=100);
95
   opacity: 1;
96
   top: 0;
97
 }
98
 
99
}
100
 
101
@-ms-keyframes "notification" {
102
 from {
103
   top: 20px;
104
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
105
   filter: alpha(opacity=0);
106
   opacity: 0;
107
 }
108
 to {
109
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
110
   filter: alpha(opacity=100);
111
   opacity: 1;
112
   top: 0;
113
 }
114
 
115
}
116
 
117
@-o-keyframes "notification" {
118
 from {
119
   top: 20px;
120
   filter: alpha(opacity=0);
121
   opacity: 0;
122
 }
123
 to {
124
   filter: alpha(opacity=100);
125
   opacity: 1;
126
   top: 0;
127
 }
128
 
129
}
130
 
131
.notification > img {
132
  display: inline-block;
133
  vertical-align: middle;
134
  margin-right: 8px;
135
  width: 80px;
136
}
137
 
138
.notification > p {
139
  display: inline-block;
140
  vertical-align: middle;
141
  position: relative;
142
  top: -1px;
143
  width: 207px;
144
}
145
 
 
JavaScript 
$(function () {
1
$(function () {
2
  var images = [],
3
  notification1 = document.createElement('div'),
4
  notification2 = document.createElement('div'),
5
  notification3 = document.createElement('div'),
6
  container = document.getElementById('notifications');
7
 
8
 
9
  images.push(new Image());
10
  images.push(new Image());
11
  images.push(new Image());
12
  images[0].src = "http://cssdeck.com/uploads/media/items/6/6zO6dK2.png";
13
  images[1].src = "http://cssdeck.com/uploads/media/items/7/7jvL4q5.png";
14
  images[2].src = "http://cssdeck.com/uploads/media/items/2/2nifRaa.png";
15
  notification1.setAttribute('class', 'notification');
16
  notification2.setAttribute('class', 'notification');
17
  notification3.setAttribute('class', 'notification');
18
  notification1.innerHTML = '<img src='+ images[0].src + '> <p>This is the HUD notification style. The only image used is for the icon.</p>';
19
  notification2.innerHTML = '<img src='+ images[1].src + '> <p>Everything other than the icon is CSS3. Javascript is used to add notifications to the page after a delay, but nothing else.</p>';
20
  notification3.innerHTML = '<img src='+ images[2].src + '> <p>The text can be as long as it needs to be and the notification will stretch to contain it: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
21
22
  setTimeout(function() {
23
    container.appendChild(notification1);
24
  }, 1000);
25
  setTimeout(function() {
26
    container.appendChild(notification2);
27
  }, 3000);
28
  setTimeout(function() {
29
    container.appendChild(notification3);
30
  }, 5000);
31
});
 

Growl Notifications

CSSDeck G+