Ajax Loader
HTML 
<!-- Logo Brackets Adobe Puro CSS -->
1
<!-- Logo Brackets Adobe Puro CSS -->
2
<div class="brackets"></div>
3
<p title="Brackets">Brackets</p>
4
<div class="flow">
5
      <boton class="copyright" title="Copyright © 2013 Fraph">©</boton>
6
  </div>
7
    <footer class="footer">
8
    <h5>Developed by <a target="_blank" href="https://twitter.com/mrjopino" title="José Pino">@mrjopino</a></h5>
 
CSS 
/*
1
/*
2
Author: @mrjopino
3
Name: Logo Brackets
4
Description: Logo Brackets Adobe Puro CSS
5
*/
6
@charset "UTF-8";
7
@import url(http://fonts.googleapis.com/css?family=Titan+One);
8
 
9
body{
10
  background: #1b1e24;
11
  background-image:-webkit-linear-gradient(right,#1b1e24,#1b1e24 50%,#1b1e24);
12
  background-image:-moz-linear-gradient(right,#1b1e24,#1b1e24 50%,#1b1e24);
13
  background-image:-o-linear-gradient(right,#1b1e24,#1b1e24 50%,#1b1e24);
14
  background-image:-ms-linear-gradient(right,#1b1e24,#1b1e24 50%,#1b1e24);
15
  background-image:linear-gradient(to left,#1b1e24,#1b1e24 50%,#1b1e24);
16
  font-family: helvetica, arial;
17
  text-align: center;
18
  margin:0;
19
  padding:0;
20
  padding-top: 40px;
21
}
22
 
23
p{
24
  font-family:'Titan One', cursive;
25
  font-size:4em;
26
  text-align:center;
27
  color: #2c90c6;
28
  margin: 2% auto;
29
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -0px 2px, rgba(0,0,0,0.8) 0 30px 25px;
30
}
31
 
32
.brackets {
33
  margin: 40px auto;
34
  position: relative;
35
  box-sizing: border-box;
36
  width: 195px;
37
  height: 190px;
38
  background: #25a5de;
39
  border-radius: 40px;
40
  overflow: hidden;
41
  z-index: -1;
42
  background: #0173bd;
43
  background: -moz-linear-gradient(top, #29abe2 43%, #0173bd 100%);
44
  background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#29abe2), color-stop(100%,#0173bd));
45
  background: -webkit-linear-gradient(top, #29abe2 43%,#0173bd 100%);
46
  background: -o-linear-gradient(top, #29abe2 43%,#0173bd 100%);
47
  background: -ms-linear-gradient(top, #29abe2 43%,#0173bd 100%);
48
  background: linear-gradient(to bottom, #29abe2 43%, #0173bd 100%);
49
  box-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -0px 2px, rgba(0,0,0,0.8) 0 30px 25px;
50
}
51
 
52
.brackets:after {
53
  position: absolute;
54
  content: " ";
55
  top: 24px;
56
  left: 24px;
57
  right: 24px;
58
  bottom: 24px;
59
  background: #fff;
60
  border-radius: 20px;
61
  border: 15px solid #fff;
62
  -webkit-box-shadow: inset 0px 0px 0 29px #4d4d4d;
63
  -moz-box-shadow: inset 0px 0px 0 29px #4d4d4d;
64
  box-shadow: inset 0px 0px 0 25px #4d4d4d;
65
  z-index: 1;
66
}
67
 
68
.brackets:before {
69
  position: absolute;
70
  content: " ";
71
  top: 30px;
72
  bottom: 30px;
73
  left: 50%;
74
  width: 16px;
75
  margin: 0 0 0 -8px;
76
  background: #fff;
77
  z-index: 2;
78
}
79
 
80
/* My Copyright */
81
.flow boton {
82
  border: none;
83
  background: hsl(192, 15%, 84%);
84
  border-radius: 4px;
85
  outline: none;
86
  padding: 7px 10px;
87
  color: #fff;
88
  font-size: 12px;
89
  box-shadow: 0 0 15px #000;
90
}
91
.flow boton:hover {
92
  background: hsl(204, 8%, 76%);
93
  transition: background .7s;
94
}
95
.flow boton:active {
96
  background: hsl(204, 8%, 66%);
97
}
98
.flow .copyright {
99
  border: none;
100
  background: hsl(6, 78%, 57%);
101
}
102
.flow .copyright:hover {
103
  background: #7db9e8
104
}
105
.flow .copyright:active {
106
  background: hsl(6, 64%, 36%)
107
}
108
 
109
 
110
/* Footer developed by @mrjopino */
111
.footer {
112
  display: block;
113
  max-width: 400px;
114
  font-family: helvetica, arial sans-serif;
115
  text-align: center;
116
  padding: 0;
117
  font-size: 0.8em;
118
  color: #888888;
119
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
120
}
121
.footer p a,
122
.footer a {
123
  color: white;
124
  text-decoration: none;
125
  font-weight: 700;
126
}
127
.footer p a:hover,
128
.footer a:hover,
129
.footer p a:active,
130
.footer a:active {
131
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
132
  color: white;
133
}
134
 
135
footer {
136
  max-width: 175px;
137
  margin: 0 auto;
138
  display: block;
139
  padding: 2em;
140
  width: 100%;
141
}
142
 
143
@media screen and (max-width : 480px) {
144
}
145
 
146
@media screen and (min-width: 481px) and (max-width : 700px) {
147
    p {
148
    font-size: 3em
149
}
150
 
151
  .brackets {
152
  width: 180px;
153
  height: 180px;
154
}
155
}
156
 
157
@media (max-width: 600px) {
158
        * {
159
    -webkit-column-count: 1!important;
160
}
161
  p {
162
    font-size: 3em
163
}
164
 
165
  .brackets {
166
  width: 180px;
167
  height: 180px;
168
}
169
}
170
 
171
 
 

Logo Brackets

CSSDeck G+