Ajax Loader
HTML 
<!--Famous Google Icons Demo by Codelator.com-->
1
<!--Famous Google Icons Demo by Codelator.com-->
2
<html>
3
<head>
4
<meta charset="UTF-8">
5
<title>Famous Google Icons(Part 1) Demo | Codelator</title>
6
</head>
7
 
8
<body>
9
 
10
<h1>Google Icons (Part-1)</h1>
11
 
12
<section>
13
<article>
14
<div id="websearch">
15
  <div id="lenswhite">
16
      <div id="innerbluecircle"></div>
17
    </div>
18
    <div id="lensholder"></div>
19
</div>
20
<h3>Web Search</h3>
21
</article>
22
 
23
<article>
24
<div id="blogger">
25
  <div id="B-upper">
26
    <div id="B-upper-dash"></div>
27
    </div>
28
    <div id="B-lower">
29
      <div id="B-lower-dash"></div>
30
    </div>
31
</div>
32
<h3>Blogger</h3>
33
</article>
34
 
35
<article>
36
<div id="gapps">
37
  <div id="g-yellow"></div>
38
    <div id="g-red"></div>
39
    <div id="g-green"></div>
40
</div>
41
<h3>Google Business Apps</h3>  
42
</article>
43
 
44
<article>
45
<div id="orkut-outer">
46
  <div id="orkut-inner"></div>
47
</div>
48
<h3>Orkut</h3>  
49
</article>
50
 
51
<article>
52
<div id="drive">
53
  <div id="driveg"></div>
54
  <div id="drivey"></div>
55
  <div id="driveb"></div>
56
</div>
57
<h3>Google Drive</h3>
58
</article>
59
 
60
</section>
61
 
62
</body>
63
</html>
64
 
 
CSS 
@charset "UTF-8";
1
@charset "UTF-8";
2
/*Famous Google Icons Demo by Codelator.com*/
3
body {
4
  text-align: center;
5
}
6
 
7
section {
8
  display: table;
9
  margin: 5px auto;
10
  width: 1000px;
11
}
12
 
13
section article {
14
  display: table-cell;
15
  width: 200px;
16
  vertical-align: bottom;
17
}
18
 
19
h3 {
20
  font-family: 'Open Sans', sans-serif;
21
  font-size: 12px;
22
  font-weight: 400;
23
  text-align: center;
24
}
25
/*Web Search*/
26
#websearch{
27
  height:90px;
28
  width:90px;
29
  background-color:#4485F9;
30
  border-radius:10px/10px;
31
}
32
#lenswhite{
33
  width:40px;
34
  height:40px;
35
  border-radius:20px;
36
  -webkit-border-radius:20px;
37
  -moz-border-radius:20px;
38
  background:#fff;
39
  position:relative;
40
  top:15px;
41
  left:20px
42
}
43
#innerbluecircle {
44
            width:30px;
45
            height:30px;
46
            border-radius:15px;
47
            -webkit-border-radius:15px;
48
      -moz-border-radius:15px;
49
      background:#4485F9;
50
      position:relative;
51
      top:5px;
52
      left:5px
53
}
54
#lensholder {
55
            width:6px;
56
            height:30px;
57
            background:white;
58
      -webkit-transform:rotate(-40deg);
59
            -moz-transform:rotate(-40deg);
60
            -o-transform:rotate(-40deg);
61
      position:relative;
62
      border-bottom-left-radius:15px;
63
      border-bottom-right-radius:15px;
64
      top:4px;
65
      left:56px
66
}
67
 
68
/*Blogger*/
69
#blogger{
70
  height:90px;
71
  width:90px;
72
  background-color:#FF6500;
73
  border-radius:15px/15px;
74
}
75
#B-upper{
76
  height:25px;
77
  width:50px;
78
  background-color:#fff;
79
  position:relative;
80
  top:15px;
81
  left:15px;
82
  border-top-left-radius:15px;
83
  border-top-right-radius:15px;
84
}
85
#B-upper-dash{
86
  height:10px;
87
  width:22px;
88
  background-color:#FF6500;
89
  position:relative;
90
  top:15px;
91
  left:15px;
92
  border-radius:10px/10px;
93
}
94
#B-lower{
95
  height:35px;
96
  width:60px;
97
  background-color:#fff;
98
  position:relative;
99
  top:15px;
100
  left:15px;
101
  border-bottom-left-radius:15px;
102
  border-bottom-right-radius:15px;
103
  border-top-right-radius:5px;
104
}
105
#B-lower-dash{
106
  height:10px;
107
  width:30px;
108
  background-color:#FF6500;
109
  position:relative;
110
  top:10px;
111
  left:15px;
112
  border-radius:10px/10px;
113
}
114
 
115
/*Google Business Apps*/
116
#gapps{
117
  height:100px;width:100px; background-color:#005FBB;}
118
#g-yellow{
119
  width: 0;
120
  height: 0;
121
  border-top: 50px solid transparent;
122
  border-left: 50px solid #FFCC01;
123
  border-bottom: 50px solid transparent;
124
  position:relative
125
126
}
127
#g-red{
128
  width: 0;
129
  height: 0;
130
  border-top: 50px solid transparent;
131
  border-right: 50px solid #C40D09;
132
  border-bottom: 0 solid transparent;
133
  top:-50px;
134
  position:relative;
135
}
136
#g-green{
137
  width:50px;
138
  height:50px;
139
  background:#32AA48;
140
  -webkit-transform:skew(45deg);
141
  -moz-transform:skew(45deg);
142
  -o-transform:skew(45deg);
143
  top:-149px;
144
  left:25px;
145
  position:relative;
146
}
147
 
148
/*Orkut*/
149
#orkut-outer{
150
  width:110px;
151
  height:110px;
152
  border-radius:55px;
153
  -webkit-border-radius:55px;
154
  -moz-border-radius:55px;
155
  background:#C62BA3;
156
  position:relative;
157
158
}
159
#orkut-inner{
160
  width:70px;
161
  height:70px;
162
  border-radius:35px;
163
  -webkit-border-radius:35px;
164
  -moz-border-radius:35px;
165
  background:white;
166
  position:relative;
167
  top:20px;
168
  left:20px;
169
}
170
 
171
/*Google Drive*/
172
#drivey{
173
  width:45px;
174
  height:70px;
175
  background:#FED061;
176
  -webkit-transform:skew(30deg);
177
  -moz-transform:skew(30deg);
178
  -o-transform:skew(30deg);
179
  position:relative;
180
}
181
#driveg{
182
  width:45px;
183
  height:110px;
184
  background:#11A861;
185
  -webkit-transform:skew(-30deg);
186
  -moz-transform:skew(-30deg);
187
  -o-transform:skew(-30deg);
188
  position:relative;
189
  top:110px;
190
  left:-52px;
191
}
192
#driveg:after{
193
  content: "";
194
  border-bottom: 45px solid #fff;
195
  border-right: 52px solid transparent;
196
  position: absolute;
197
  left: -5px;
198
  bottom: -2px;
199
}
200
#driveb{
201
  width:82px;
202
  height:40px;
203
  background:#3876E3;
204
  -webkit-transform:skew(-30deg);
205
  -moz-transform:skew(-30deg);
206
  -o-transform:skew(-30deg);
207
  position:relative;
208
  top:-0px;
209
  left:-28px;
210
}
211
 
212
#websearch, #blogger, #gapps, #orkut-outer {
213
  position: relative;
214
  margin: 0 auto;
215
}
216
 
217
h1{
218
  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
219
  margin-top:50px;
220
}
221
 
222
#drive{
223
  position:relative;
224
  left:100px
225
}
 

Famous Google Icons in CSS

CSSDeck G+