Ajax Loader
HTML 
<div class="callout top">Your Favourite HTML,CSS,JS Playground!</div>
1
<div class="callout top">Your Favourite HTML,CSS,JS Playground!</div>
2
<div class="callout bottom">Your Favourite HTML,CSS,JS Playground!</div>
3
<div class="callout left">Your Favourite HTML,CSS,JS Playground!</div>
4
<div class="callout right">Your Favourite HTML,CSS,JS Playground!</div>
5
<div class="callout top-left">Your Favourite HTML,CSS,JS Playground!</div>
6
<div class="callout top-right">Your Favourite HTML,CSS,JS Playground!</div>
 
CSS 
body {
1
body {
2
  font-family: Helvetica;
3
  font-size: 13px;
4
}
5
 
6
div.callout {
7
  height: 60px;
8
  width: 200px;
9
  float: left;
10
}
11
 
12
div.callout {
13
  background-color: #444;
14
  background-image: -moz-linear-gradient(top, #444, #444);
15
  position: relative;
16
  color: #ccc;
17
  padding: 10px;
18
  border-radius: 3px;
19
  box-shadow: 0px 0px 20px #999;
20
  margin: 25px;
21
  min-height: 50px;
22
  border: 1px solid #333;
23
  text-shadow: 0 0 1px #000;
24
25
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
26
}
27
 
28
.callout::before {
29
  content: "";
30
  width: 0px;
31
  height: 0px;
32
  border: 0.8em solid transparent;
33
  position: absolute;
34
}
35
 
36
.callout.top::before {
37
  left: 45%;
38
  bottom: -20px;
39
  border-top: 10px solid #444;
40
}
41
 
42
.callout.bottom::before {
43
  left: 45%;
44
  top: -20px;
45
  border-bottom: 10px solid #444;
46
}
47
 
48
.callout.left::before {
49
  right: -20px;
50
  top: 40%;
51
  border-left: 10px solid #444;
52
}
53
 
54
.callout.right::before {
55
  left: -20px;
56
  top: 40%;
57
  border-right: 10px solid #444;
58
}
59
 
60
.callout.top-left::before {
61
  left: 7px;
62
  bottom: -20px;
63
  border-top: 10px solid #444;
64
}
65
 
66
.callout.top-right::before {
67
  right: 7px;
68
  bottom: -20px;
69
  border-top: 10px solid #444;
70
}
 
JavaScript 
document
1
document
2
  .querySelectorAll('body')[0]
3
  .style
4
  .backgroundColor = 'whiteSmoke';
 

css-callouts

CSSDeck G+