Ajax Loader
×
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
2
 
3
<div class="block">
4
  <h4>Fast registration</h4>
5
  <p class="block-information">Just type your email and we will register you automatically.</p>
6
  <form class="block-form">
7
    <div class="block-form-input">
8
      <input type="text" placeholder="Email" />
9
    </div>
10
    <div class="block-form-submit">
11
      <input type="submit" value="Continue registration&hellip;" />
12
    </div>
13
</form>
14
  <p><small class="grey block-note-text">At the next step you can type your new password&hellip;</small></p>
15
</div>
16
<input type="button" class="showhide" value="Show / Hide&hellip;" />
17
 
18
 
19
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 
CSS
* {
1
* {
2
  box-sizing: border-box;
3
}
4
 
5
body {
6
  font: .875em/1.5em "Open Sans", Helvetica, Arial, sans-serif !important;
7
  padding: 20px;
8
}
9
 
10
form input {
11
  vertical-align: top;
12
}
13
 
14
form {
15
  font-size: 0;
16
}
17
 
18
input {
19
  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
20
  line-height: 1.5em;
21
  margin: 0;
22
}
23
 
24
input[type="submit"],
25
input[type="button"] {
26
  font-size: 13px !important;
27
}
28
 
29
input[type="text"],
30
input[type="text"]:focus {
31
  -webkit-transition: box-shadow .3s;
32
}
33
 
34
input[type="text"] {
35
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #fff 10%);
36
  font-size: 15px;
37
  line-height: 25px;
38
  border: 1px solid #ccc;
39
  padding: 3px 13px;
40
}
41
 
42
input[type="text"]:focus {
43
  outline: none;
44
  box-shadow: 0 0 3px 0 #FFC000;
45
  border-color: #DDC988;
46
}
47
 
48
input[type="submit"],
49
input[type="button"]{
50
  background: #34B4EF -webkit-linear-gradient(top, #47C1F3 0%, #36B4EE 100%);
51
  color: #fff;
52
  padding: 6px 10px;
53
  border: 1px solid #2A98CA;
54
  border-top-color: #2E9FD2;
55
  border-bottom-color: #2892C3;
56
  border-radius: 2px;
57
  box-shadow: inset 0 3px 2px -3px #fff,
58
              inset 0 -2px 12px -10px #023E5A,
59
                    0 1px 2px rgba(0,0,0,.15);
60
  text-shadow: 0 1px 0 #2E9FD2;
61
}
62
 
63
input[type="submit"]:hover,
64
input[type="button"]:hover{
65
  background-image: -webkit-linear-gradient(top, #59C8F5 0%, #43B9F0 100%);
66
  cursor: pointer;
67
}
68
 
69
input[type="submit"]:active,
70
input[type="button"]:active{
71
  background-image: none;
72
  background-color: #3EBAF0;
73
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),
74
                    0 1px 2px rgba(0,0,0,.15);
75
  border-color: #2892C3;
76
}
77
 
78
.grey {
79
  color: #aaa;
80
}
81
 
82
.block {
83
  width: 460px;
84
  background-image: -webkit-linear-gradient(top, #fff 50%, #F9FDFF 100%);
85
  padding: 23px;
86
  margin: 0 0 15px 0;
87
  border: 1px solid #dfdfdf;
88
  border-radius: 6px;
89
  display: block;
90
  position: relative;
91
  box-shadow: inset 0 -1px 0 #fff,
92
                    0  1px 0 rgba(0,0,0,.03);
93
  -webkit-transform: scale(1,1);
94
  border-spacing: 0;
95
}
96
 
97
.block:after,
98
.block:before {
99
  width: 0;
100
  height: 0;
101
  content: "";
102
  border: 12px outset transparent;
103
  border-top: 12px outset #DFDFDF;
104
  position: absolute;
105
  bottom: -24px;
106
  left: 25px;
107
}
108
 
109
.block:before {
110
  border-top-color: #F9FDFF;
111
  bottom: -23px;
112
  z-index: 100;
113
}
114
 
115
.block p,
116
.block h4 {
117
  margin: 0;
118
}
119
 
120
.block h4 {
121
  text-align: center;
122
  padding-bottom: 20px;
123
}
124
 
125
.block .block-information {
126
  margin-bottom: 20px;
127
}
128
 
129
.block-form {
130
  width: 100%;
131
}
132
 
133
.block-form-input,
134
.block-form-submit {
135
  display: inline-block;
136
}
137
 
138
.block-form-input input,
139
.block-form-submit input {
140
  width: 100%;
141
}
142
 
143
.block-form-input {
144
  width: 60%;
145
  padding-right: 5px;
146
}
147
 
148
.block-form-submit {
149
  width: 40%
150
}
151
 
152
.block-note-text {
153
  margin-top: 5px;
154
  display: inline-block;
155
  text-shadow: 0 1px 0 #fff;
156
}
 
JavaScript
$('.showhide').on('click', function () {
1
$('.showhide').on('click', function () {
2
  $('.block').css('border-spacing', '0');
3
  $('.block').stop().animate(
4
    { borderSpacing: 1 },
5
    { step: function (now) {
6
      $('.block').css('-webkit-transform','scale('+now+','+now+')');
7
    } }, 1000, 'default');
8
});
 

Untitled

CSSDeck G+