Ajax Loader
×
HTML 
<div id="cadre">
1
<div id="cadre">
2
    <div id="statusbar"></div>
3
    <div id="compo">
4
        <p><span id="numero">06 26 51 55 66</span><br/><span id="name">Amaury Gilbon</span></p>
5
    </div>
6
    <div id="number">
7
        <div class="button">
8
            <p><span class="num">1<br/></span><span class="letter"></span></p>
9
        </div>
10
        <div class="button">
11
            <p><span class="num">2<br/></span><span class="letter">ABC</span></p>
12
        </div>
13
        <div class="button">
14
            <p><span class="num">3<br/></span><span class="letter">DEF</span></p>
15
        </div>
16
        <div class="button">
17
            <p><span class="num">4<br/></span><span class="letter">GHI</span></p>
18
        </div>
19
        <div class="button">
20
            <p><span class="num">5<br/></span><span class="letter">JKL</span></p>
21
        </div>
22
        <div class="button">
23
            <p><span class="num">6<br/></span><span class="letter">MNO</span></p>
24
        </div>
25
        <div class="button">
26
            <p><span class="num">7<br/></span><span class="letter">PQRS</span></p>
27
        </div>
28
        <div class="button">
29
            <p><span class="num">8<br/></span><span class="letter">TUV</span></p>
30
        </div>
31
        <div class="button">
32
            <p><span class="num">9<br/></span><span class="letter">WXYZ</span></p>
33
        </div>
34
        <div class="button">
35
            <p><span class="num2">*<br/></span><span class="letter"></span></p>
36
        </div>
37
        <div class="button">
38
            <p><span class="num">0<br/></span><span class="letter">+</span></p>
39
        </div>
40
        <div class="button">
41
            <p><span class="num">#<br/></span><span class="letter"></span></p>
42
        </div>
43
        <div class="button2">
44
            <div class="button3"></div>
45
            <div class="buttoncall"></div>
46
            <div class="button4"></div>
47
        </div>
48
    </div>
49
    <div id="menu">
50
        <div class="menu1"></div>
51
        <div class="menu2"></div>
52
        <div class="menu3"></div>
53
        <div class="menu4"></div>
54
        <div class="menu5"></div>
55
    </div>
56
</div>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
body{background:url('http://subtlepatterns.com/patterns/ticks_@2X.png');
4
  background-size:200px;}
5
#cadre
6
{
7
  transform:scale(1.7);
8
  -webkit-transform:scale(1.7);
9
  width:200px;
10
  height:313px;
11
  margin:150px auto;
12
  background-color:#373C43;
13
}
14
#statusbar
15
{
16
  width:200px;
17
  height:15px;
18
  background-color:#22262D;
19
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/Sans-titre-3.png);
20
  background-size:contain;
21
  background-repeat:no-repeat;
22
  background-position:10px;
23
}
24
#compo
25
{
26
  width:198px;
27
  height:35px;
28
}
29
#number
30
{
31
  width:198px;
32
  height:220px;
33
  margin:0px 1px 0px 1px;
34
}
35
 
36
.button
37
{
38
  width:64px;
39
  height:42px;
40
  background-color:#52565C;
41
  float:left;
42
  margin:1px 1px 1px 1px;
43
  -webkit-border-radius:5px;
44
  cursor:context-menu;
45
}
46
.button3
47
{
48
  width:64px;
49
  height:39px;
50
  float:left;
51
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/ajout2.png);
52
  background-size:35%;
53
  background-position:center;
54
  background-repeat:no-repeat;
55
 
56
  margin:1px 1px 1px 1px;
57
  -webkit-border-radius:5px;
58
}
59
.button3:hover
60
{
61
  width:64px;
62
  height:39px;
63
  float:left;
64
  background-color:#A6A7A9;
65
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/ajout.png);
66
  background-size:35%;
67
  background-position:center;
68
  background-repeat:no-repeat;
69
 
70
  margin:1px 1px 1px 1px;
71
  -webkit-border-radius:5px;
72
}
73
.button4
74
{
75
  width:64px;
76
  height:39px;
77
  float:left;
78
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/delete2.png);
79
  background-size:35%;
80
  background-position:center;
81
  background-repeat:no-repeat;
82
 
83
  margin:1px 1px 1px 1px;
84
  -webkit-border-radius:5px;
85
}
86
.button4:hover
87
{
88
  width:64px;
89
  height:39px;
90
  float:left;
91
  background-color:#A6A7A9;
92
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/delete.png);
93
  background-size:35%;
94
  background-position:center;
95
  background-repeat:no-repeat;
96
 
97
  margin:1px 1px 1px 1px;
98
  -webkit-border-radius:5px;
99
}
100
 
101
.buttoncall
102
{
103
  width:64px;
104
  height:39px;
105
  float:left;
106
  background-color:#699389;
107
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/call.png);
108
  background-size:25%;
109
  background-position:center;
110
  background-repeat:no-repeat;
111
  margin:1px 1px 1px 1px;
112
  -webkit-border-radius:5px;
113
}
114
.buttoncall:hover
115
{
116
  width:64px;
117
  height:39px;
118
  float:left;
119
  background-color:#6eb4a3;
120
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/call.png);
121
  background-size:25%;
122
  background-position:center;
123
  background-repeat:no-repeat;
124
  margin:1px 1px 1px 1px;
125
  -webkit-border-radius:5px;
126
}
127
.button:hover
128
{
129
  width:64px;
130
  height:42px;
131
  background-color:#A6A7A9;
132
  float:left;
133
  margin:1px 1px 1px 1px;
134
  -webkit-border-radius:5px;
135
}
136
#compo p
137
{
138
  text-align:center;
139
  color:#A6A7A9;
140
  margin:12px;
141
}
142
#compo #numero
143
{
144
  font-size:1.1em;
145
  font-family:euphemia;
146
  line-height:90%;
147
148
 
149
}
150
#compo #name
151
{
152
  font-size:0.5em;
153
  color:#96e9d5;
154
  font-family:euphemia;
155
  line-height:290%;
156
}
157
.button:hover .num, .button:hover .letter, .button:hover .num2
158
{
159
  color:#ffffff;
160
}
161
#number p
162
{
163
  text-align:center;
164
165
166
  color:#A6A7A9;
167
  font-family:euphemia;
168
  line-height:90%;
169
}
170
.num
171
{
172
  position:relative;
173
  top:-7px;
174
  font-size:1.4em;
175
176
}
177
.num2
178
{
179
  font-size:2.5em;
180
    position:relative;
181
  top:4px;
182
 
183
}
184
.letter
185
{
186
  position:relative;
187
  top:-7px;
188
 
189
  font-size:0.45em;
190
}
191
.button2
192
{
193
  width:198px;
194
  height:41px;
195
  background-color:#52565C;
196
  float:left;
197
  -webkit-border-radius:5px;
198
  margin-top:1px;
199
}
200
#menu
201
{
202
  width:200px;
203
  height:30px;
204
  background-color:#22262D;
205
  background-position:3px;
206
207
}
208
.menu1
209
{
210
  width:39px;
211
  height:30px;
212
  border-right:solid black 1px;
213
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/favoris.png);
214
    background-size:60%;
215
  background-repeat:no-repeat;
216
  background-position:center;
217
  float:left;
218
    background-color:#22262D;
219
}
220
.menu1:hover
221
{
222
  width:39px;
223
  height:30px;
224
  border-right:solid black 1px;
225
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/favoris.png);
226
    background-size:60%;
227
  background-repeat:no-repeat;
228
  background-position:center;
229
  float:left;
230
    background-color:#373C43;
231
}
232
.menu2
233
{
234
  width:39px;
235
  height:30px;
236
  border-right:solid black 1px;
237
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/appel.png);
238
    background-size:50%;
239
  background-repeat:no-repeat;
240
  background-position:center;
241
  float:left;
242
    background-color:#22262D;
243
}
244
.menu2:hover
245
{
246
  width:39px;
247
  height:30px;
248
  border-right:solid black 1px;
249
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/appel.png);
250
    background-size:50%;
251
  background-repeat:no-repeat;
252
  background-position:center;
253
  float:left;
254
    background-color:#373C43;
255
}
256
.menu3
257
{
258
  width:39px;
259
  height:30px;
260
  border-right:solid black 1px;
261
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/profil.png);
262
    background-size:60%;
263
  background-repeat:no-repeat;
264
  background-position:center;
265
  float:left;
266
    background-color:#22262D;
267
}
268
.menu3:hover
269
{
270
  width:39px;
271
  height:30px;
272
  border-right:solid black 1px;
273
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/profil.png);
274
    background-size:60%;
275
  background-repeat:no-repeat;
276
  background-position:center;
277
  float:left;
278
    background-color:#373C43;
279
}
280
.menu4
281
{
282
  width:39px;
283
  height:30px;
284
  border-right:solid black 1px;
285
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/clavier.png);
286
    background-size:55%;
287
  background-repeat:no-repeat;
288
  background-position:center;
289
  float:left;
290
    background-color:#22262D;
291
}
292
.menu4:hover
293
{
294
  width:39px;
295
  height:30px;
296
  border-right:solid black 1px;
297
    background-image:url(http://webamaury.fr/Doc/CSSD/dialer/clavier.png);
298
    background-size:55%;
299
  background-repeat:no-repeat;
300
  background-position:center;
301
  float:left;
302
    background-color:#373C43;
303
}
304
.menu5
305
{
306
  width:39px;
307
  height:30px;
308
  float:left;
309
  background-color:#22262D;
310
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/messagerie.png);
311
    background-size:80%;
312
  background-repeat:no-repeat;
313
  background-position:center;
314
}
315
.menu5:hover
316
{
317
  width:39px;
318
  height:30px;
319
  float:left;
320
  background-color:#373C43;
321
  background-image:url(http://webamaury.fr/Doc/CSSD/dialer/messagerie.png);
322
    background-size:80%;
323
  background-repeat:no-repeat;
324
  background-position:center;
325
}
 

iphone dialer

CSSDeck G+