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
    position: relative;
13
    width: 120px;
14
    height: 120px;
15
    float: left;
16
}
17
 
18
.square:nth-child(odd) { background-color: #1D1D1D }
19
.square:nth-child(even) { background-color: #fff }
20
 
21
.square img {
22
    position: absolute;
23
    top: 0;
24
    right: 0;
25
    bottom: 0;
26
    left: 0;
27
    margin: auto
28
}
 

Untitled

CSSDeck G+