Ajax Loader
×
HTML
<div id="a1" class="square">
1
<div id="a1" class="square">
2
    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">
3
</div>
4
<div id="a2" class="square">
5
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">
6
</div>
7
<div id="a3" class="square">
8
    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">
9
</div>
10
<div id="a4" class="square">
11
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">
12
</div>
13
<div id="a5" class="square">
14
    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">
15
</div>
16
<div id="a6" class="square">
17
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">
18
</div>
19
<div id="a7" class="square">
20
    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">
21
</div>
22
<div id="a8" class="square">
23
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">
24
</div>
 
CSS
html {
1
html {
2
  padding: 100px 0;
3
  background-color: #eee
4
}
5
 
6
body {
7
  width: 960px;
8
  margin: 0 auto;
9
}
10
 
11
.square {
12
    width: 120px;
13
    height: 120px;
14
    text-align: center;
15
    display: table-cell;
16
    vertical-align: middle;
17
}
18
 
19
.square:nth-child(odd) { background-color: #1D1D1D }
20
.square:nth-child(even) { background-color: #fff }
21
 
 

Untitled

CSSDeck G+