Ajax Loader
HTML 
<link rel="icon" href="favicon.ico" type="image/x-icon">
1
<link rel="icon" href="favicon.ico" type="image/x-icon">
2
<link rel="stylesheet" href="http://postituto.levelhard.com.br/css/normalize.css" />
3
<link rel="stylesheet" href="http://postituto.levelhard.com.br/css/ui-lightness/jquery-ui.min.css" />
4
<script type="text/javascript" src="http://postituto.levelhard.com.br/js/jquery.min.js"></script>
5
<script type="text/javascript" src="http://postituto.levelhard.com.br/js/jquery-ui.min.js"></script>
6
<script type="text/javascript" src="http://postituto.levelhard.com.br/js/prefixfree.min.js"></script>
7
<script type="text/javascript" src="http://postituto.levelhard.com.br/js/tinymce/tinymce.min.js"></script>
8
<script type="text/javascript" src="http://postituto.levelhard.com.br/js/jquery.form.min.js"></script>
9
 
10
<div class="hds-bg"></div>
11
<div class="hds-content">
12
  <div id="new" class="new-postit"></div>
13
  <div id="menu" class="open-menu"></div>
14
    <div class="hds-postit-model">
15
    <div class="hds-postit">
16
      <div class="fixe"></div>
17
      <div class="box">
18
        <div class="header">
19
          <div class="title">
20
            <input type="text" />
21
          </div>
22
          <div class="control">
23
            <input id="close" type="button" value="&#x2715" />
24
          </div>
25
        </div>
26
        <div class="main">
27
          <div class="textarea"></div>
28
        </div>
29
        <div class="footer">
30
          <ul>
31
            <li><a href="javascript:void();"><span class="color" style="background: #f8ec52"></span></a>
32
              <ul>
33
                <li><a href="javascript:void();"><span style="background: #c4ffa5"></span></a></li>
34
                <li><a href="javascript:void();"><span style="background: #ffd3d3"></span></a></li>
35
                <li><a href="javascript:void();"><span style="background: #9ab4f1"></span></a></li>
36
                <li><a href="javascript:void();"><span style="background: #fafafa"></span></a></li>
37
                <li><a href="javascript:void();"><span style="background: #f8ec52"></span></a></li>
38
              </ul>
39
            </li>
40
          </ul>
41
        </div>
42
      </div>
43
    </div>
44
  </div>
45
</div>
46
 
 
CSS 
* {
1
* {
2
    outline: none;
3
}
4
 
5
body {
6
    overflow: hidden;
7
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
8
    font-size: 12px;
9
    color: #000;
10
    background-color: #b88846;
11
    background-image: linear-gradient(45deg, #9f753b 25%, transparent 25%, transparent), linear-gradient(-45deg, #9f753b 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #9f753b 75%), linear-gradient(-45deg, transparent 75%, #9f753b 75%);
12
    background-size: 300px 300px;
13
}
14
 
15
.hds-bg {
16
    position: absolute;
17
    top: 0px;
18
    left: 0px;
19
    right: 0px;
20
    bottom: 0px;
21
    background: url('http://postituto.levelhard.com.br/img/background.jpg');
22
    background-repeat: repeat;
23
    background-position: center;
24
    display: none;
25
}
26
 
27
.hds-content {
28
    position: absolute;
29
    top: 0px;
30
    left: 0px;
31
    right: 0px;
32
    bottom: 0px;
33
    overflow: hidden;
34
    padding: 30px;
35
    background: radial-gradient(transparent 60%,rgba(0,0,0,0.6));
36
    display: block;
37
}
38
 
39
.new-postit {
40
    position: absolute;
41
    background: #f8ec52;
42
    top: -200px;
43
    left: -200px;
44
    width: 200px;
45
    height: 200px;
46
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
47
    cursor: pointer;
48
}
49
 
50
    .new-postit::after {
51
        content: "";
52
        position: absolute;
53
        width: 100%;
54
        height: 100%;
55
        background: #f8ec52 url('http://postituto.levelhard.com.br/img/new-postit.svg') no-repeat center;
56
        background-size: 80%;
57
        transform: rotate(60deg);
58
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
59
    }
60
 
61
    .new-postit::before {
62
        content: "";
63
        position: absolute;
64
        width: 100%;
65
        height: 100%;
66
        background: #f8ec52;
67
        transform: rotate(-60deg);
68
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
69
    }
70
 
71
.hds-postit {
72
    position: absolute;
73
    width: 380px;
74
    height: 250px;
75
    padding: 5px;
76
    background: #f8ec52;
77
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
78
    display: none;
79
}
80
 
81
    .hds-postit .fixe {
82
        position: absolute;
83
        width: 30px;
84
        height: 30px;
85
        top: -10px;
86
        left: 50%;
87
        margin-left: -15px;
88
        background: #0067ce;
89
        border-radius: 15px;
90
        box-shadow: -10px 15px 25px rgba(0,0,0,0.2), inset -1px -8px 6px rgba(0,0,0,0.4), inset 1px 1px rgba(255,255,255,0.5), -1px 4px 2px rgba(0,0,0,0.4), inset -1px -1px rgba(255,255,255,0.6), -1px 1px rgba(0,0,0,0.4);
91
        cursor: move;
92
        z-index: 10;
93
    }
94
 
95
        .hds-postit .fixe::after {
96
            content: "";
97
            position: absolute;
98
            top: -2px;
99
            left: 3px;
100
            width: 22px;
101
            height: 22px;
102
            background: radial-gradient(#014ec2,#0045bc);
103
            box-shadow: inset 0 -1px 10px rgba(255,255,255,0.4), 1px 1px 4px rgba(0,0,0,0.4);
104
            border-radius: 11px;
105
        }
106
 
107
    .hds-postit .box {
108
        position: relative;
109
        width: 100%;
110
        height: 100%;
111
    }
112
 
113
        .hds-postit .box .header {
114
            position: absolute;
115
            top: -5px;
116
            left: -5px;
117
            right: -5px;
118
            height: 35px;
119
            background: rgba(255,255,255,0.2);
120
        }
121
 
122
            .hds-postit .box .header div {
123
                display: inline-block;
124
                line-height: 0px;
125
            }
126
 
127
            .hds-postit .box .header .title {
128
                position: relative;
129
                width: auto;
130
                height: 100%;
131
                padding: 10px 10px;
132
            }
133
 
134
                .hds-postit .box .header .title input {
135
                    border: none;
136
                    background: none;
137
                }
138
 
139
            .hds-postit .box .header .control {
140
                position: relative;
141
                width: auto;
142
                height: 100%;
143
                float: right;
144
            }
145
 
146
                .hds-postit .box .header .control input {
147
                    position: relative;
148
                    width: 35px;
149
                    height: 35px;
150
                    border: none;
151
                    padding: 0px;
152
                    background: none;
153
                }
154
 
155
        .hds-postit .box .main {
156
            position: absolute;
157
            top: 40px;
158
            left: 8px;
159
            right: 8px;
160
            bottom: 30px;
161
        }
162
 
163
            .hds-postit .box .main .textarea {
164
                position: relative;
165
                width: 100%;
166
                height: 100%;
167
                border: none;
168
                resize: none;
169
                padding: 10px;
170
                box-sizing: border-box;
171
                overflow: auto;
172
            }
173
 
174
                .hds-postit .box .main .textarea::-webkit-scrollbar {
175
                    width: 6px;
176
                    height: 6px;
177
                }
178
 
179
                .hds-postit .box .main .textarea::-webkit-scrollbar-track {
180
                }
181
 
182
                .hds-postit .box .main .textarea::-webkit-scrollbar-thumb {
183
                    background-color: rgba(0,0,0,0.4);
184
                }
185
 
186
        .hds-postit .box .footer {
187
            position: absolute;
188
            bottom: 0px;
189
            left: 0px;
190
            right: 0px;
191
            height: 30px;
192
            display: block;
193
        }
194
 
195
            .hds-postit .box .footer ul {
196
                margin: 0px;
197
                padding: 0px;
198
            }
199
 
200
                .hds-postit .box .footer ul li {
201
                    list-style: none;
202
                    float: left;
203
                }
204
 
205
                    .hds-postit .box .footer ul li a {
206
                        text-decoration: none;
207
                        color: #000;
208
                        display: block;
209
                        height: 30px;
210
                        padding: 0 8px;
211
                    }
212
 
213
                    .hds-postit .box .footer ul li:hover {
214
                        background: rgba(0,0,0,0.1);
215
                    }
216
 
217
                        .hds-postit .box .footer ul li:hover > ul {
218
                            display: block;
219
                        }
220
 
221
                    .hds-postit .box .footer ul li a span {
222
                        position: relative;
223
                        width: 14px;
224
                        height: 14px;
225
                        top: 8px;
226
                        display: block;
227
                        border: 1px rgba(0,0,0,0.4) solid;
228
                        box-shadow: inset 0 7px 10px rgba(255,255,255,0.4), 0 1px 1px rgba(0,0,0,0.2);
229
                    }
230
 
231
                .hds-postit .box .footer ul ul {
232
                    position: absolute;
233
                    bottom: 0px;
234
                    background: #f8ec52;
235
                    box-shadow: 1px -1px rgba(0,0,0,0.4);
236
                    display: none;
237
                }
238
 
239
                    .hds-postit .box .footer ul ul li {
240
                        float: none;
241
                    }
242
 
243
.ui-resizable-helper {
244
    border: none;
245
    background: rgba(0,0,0,0.2);
246
}
247
 
 
JavaScript 
$('.hds-bg').fadeTo( 6000 , 0.5);
1
$('.hds-bg').fadeTo( 6000 , 0.5);
2
$('.new-postit').animate({
3
  'top': '-40px',
4
  'left': '-40px',
5
}, 600, 'easeOutBack');
6
 
7
$('#new').click(function () {
8
  $($('.hds-postit-model .hds-postit').clone()).appendTo('.hds-content').draggable({
9
    containment: 'parent',
10
    handle: '.fixe',
11
    stack: '.hds-content .hds-postit',
12
    snap: true,
13
    grid: [20, 20],
14
    snapTolerance: 15
15
  }).resizable({
16
    containment: 'parent',
17
    minWidth: 390,
18
    minHeight: 260,
19
    maxWidth: 600,
20
    animate: true,
21
    animateDuration: 'fast',
22
    animateEasing: 'easeOutCubic',
23
    grid: 20
24
  }).show('scale', 'fast');
25
26
  tinymce.init({
27
    language: 'pt_BR',
28
    selector: '.hds-postit:last .textarea',
29
    inline: true,
30
    menubar: false,
31
    toolbar_items_size: 'small',
32
    plugins: [
33
      "advlist autolink link image lists charmap hr spellchecker",
34
      "searchreplace wordcount visualblocks visualchars media nonbreaking",
35
      "table contextmenu directionality emoticons textcolor paste"
36
    ],
37
    toolbar1: "fontselect | fontsizeselect | forecolor backcolor | table | charmap ",
38
    toolbar2: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | searchreplace "
39
  });
40
});
41
 
42
$(document).on('click', '.hds-postit #close', function () {
43
  $(this).parents('.hds-postit').hide('puff', 'fast');
44
});
45
 
46
$(document).on('click', '.hds-postit .footer ul ul a', function () {
47
  var thisObj = $(this).parents('.hds-postit');
48
  thisObj.animate({ backgroundColor: $('span', this).css('background-color') }, 'fast');
49
  $('.footer ul ul', thisObj).animate({ backgroundColor: $('span', this).css('background-color') }, 'fast');
50
  $('.footer .color', thisObj).css('background-color', $('span', this).css('background-color'));
51
});
 

Simple Postit

CSSDeck G+