Ajax Loader
×
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Color Wheel</title>
6
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
7
  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8
  <link rel="stylesheet" href="css/style.css">
9
 
10
</head>
11
<body>
12
 
13
  <div class="container">
14
 
15
    <div class="color-wheel">
16
 
17
      <span id="mixer">Color Wheel</span>
18
 
19
      <ul>
20
 
21
        <li><a href="#" data-rotate="rotate(-45deg)"></a></li>
22
        <li><a href="#" data-rotate="rotate(-90deg)"></a></li>
23
        <li><a href="#" data-rotate="rotate(-135deg)"></a></li>
24
        <li><a href="#" data-rotate="rotate(-180deg)"></a></li>
25
        <li><a href="#" data-rotate="rotate(-225deg)"></a></li>
26
        <li><a href="#" data-rotate="rotate(-270deg)"></a></li>
27
        <li><a href="#" data-rotate="rotate(-315deg)"></a></li>
28
        <li><a href="#" data-rotate="rotate(-360deg)"></a></li>
29
 
30
      </ul>
31
 
32
    </div> <!-- end color-wheel -->
33
 
34
  </div> <!-- end container -->
35
 
36
</body>
37
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- GENERAL ---------- */
5
 
6
body {
7
  background: #aeac95;
8
  color: #000;
9
  font: 16px/1.5em "Open Sans", sans-serif;
10
  margin: 0;
11
}
12
 
13
a { text-decoration: none; }
14
 
15
ul {
16
  list-style: none;
17
  margin: 0;
18
  padding: 0;
19
}
20
 
21
.container {
22
  height: 356px;
23
  left: 50%;
24
  margin: -178px 0 0 -178px;
25
  position: absolute;
26
  top: 50%;
27
  width: 356px;
28
}
29
 
30
/* ---------- COLOR-WHEEL ---------- */
31
 
32
.color-wheel {
33
  margin-top: 113px;
34
  position: relative;
35
}
36
 
37
.color-wheel span {
38
  background: #4f4f4f;
39
  border: 3px solid #fff;
40
  border-radius: 50%;
41
  -webkit-box-shadow: inset 1px 1px 5px #000;
42
  box-shadow: inset 1px 1px 5px #000;
43
  color: #fff;
44
  display: block;
45
  font-size: 14px;
46
  font-weight: bold;
47
  height: 125px;
48
  margin: auto;
49
  line-height: 125px;
50
  text-align: center;
51
  white-space: nowrap;
52
  width: 125px;
53
}
54
 
55
.color-wheel li {
56
  border: 2px dashed #ccc;
57
  border-radius: 50%;
58
  left: 50%;
59
  margin: -135px 0 0 -135px;  /* -(transform-origin) */
60
  padding: 3px;
61
  position: absolute;
62
  top: 50%;
63
  -webkit-transform-origin: 135px 135px;
64
  -moz-transform-origin: 135px 135px;
65
  -ms-transform-origin: 135px 135px;
66
  -o-transform-origin: 135px 135px;
67
  transform-origin: 135px 135px;
68
}
69
 
70
.color-wheel li:nth-child(1) {
71
  -webkit-transform: rotate(45deg);
72
  -moz-transform: rotate(45deg);
73
  -ms-transform: rotate(45deg);
74
  -o-transform: rotate(45deg);
75
  transform: rotate(45deg); /* (360 / li) * nth-child */
76
}
77
 
78
.color-wheel li:nth-child(2) {
79
  -webkit-transform: rotate(90deg);
80
  -moz-transform: rotate(90deg);
81
  -ms-transform: rotate(90deg);
82
  -o-transform: rotate(90deg);
83
  transform: rotate(90deg);
84
}
85
 
86
.color-wheel li:nth-child(3) {
87
  -webkit-transform: rotate(135deg);
88
  -moz-transform: rotate(135deg);
89
  -ms-transform: rotate(135deg);
90
  -o-transform: rotate(135deg);
91
  transform: rotate(135deg);
92
}
93
 
94
.color-wheel li:nth-child(4) {
95
  -webkit-transform: rotate(180deg);
96
  -moz-transform: rotate(180deg);
97
  -ms-transform: rotate(180deg);
98
  -o-transform: rotate(180deg);
99
  transform: rotate(180deg);
100
}
101
 
102
 
103
.color-wheel li:nth-child(5) {
104
  -webkit-transform: rotate(225deg);
105
  -moz-transform: rotate(225deg);
106
  -ms-transform: rotate(225deg);
107
  -o-transform: rotate(225deg);
108
  transform: rotate(225deg);
109
}
110
 
111
.color-wheel li:nth-child(6) {
112
  -webkit-transform: rotate(270deg);
113
  -moz-transform: rotate(270deg);
114
  -ms-transform: rotate(270deg);
115
  -o-transform: rotate(270deg);
116
  transform: rotate(270deg);
117
}
118
 
119
.color-wheel li:nth-child(7) {
120
  -webkit-transform: rotate(315deg);
121
  -moz-transform: rotate(315deg);
122
  -ms-transform: rotate(315deg);
123
  -o-transform: rotate(315deg);
124
  transform: rotate(315deg);
125
}
126
 
127
.color-wheel li:nth-child(8) {
128
  -webkit-transform: rotate(360deg);
129
  -moz-transform: rotate(360deg);
130
  -ms-transform: rotate(360deg);
131
  -o-transform: rotate(360deg);
132
  transform: rotate(360deg);
133
}
134
 
135
.color-wheel li:nth-child(1) a {
136
  -webkit-transform: rotate(315deg);
137
  -moz-transform: rotate(315deg);
138
  -ms-transform: rotate(315deg);
139
  -o-transform: rotate(315deg);
140
  transform: rotate(315deg); /* 360 -((360 / li) * nth-child ) */
141
}
142
 
143
.color-wheel li:nth-child(2) a {
144
  -webkit-transform: rotate(270deg);
145
  -moz-transform: rotate(270deg);
146
  -ms-transform: rotate(270deg);
147
  -o-transform: rotate(270deg);
148
  transform: rotate(270deg);
149
}
150
 
151
.color-wheel li:nth-child(3) a {
152
  -webkit-transform: rotate(225deg);
153
  -moz-transform: rotate(225deg);
154
  -ms-transform: rotate(225deg);
155
  -o-transform: rotate(225deg);
156
  transform: rotate(225deg);
157
}
158
 
159
.color-wheel li:nth-child(4) a {
160
  -webkit-transform: rotate(180deg);
161
  -moz-transform: rotate(180deg);
162
  -ms-transform: rotate(180deg);
163
  -o-transform: rotate(180deg);
164
  transform: rotate(180deg);
165
}
166
 
167
.color-wheel li:nth-child(5) a {
168
  -webkit-transform: rotate(135deg);
169
  -moz-transform: rotate(135deg);
170
  -ms-transform: rotate(135deg);
171
  -o-transform: rotate(135deg);
172
  transform: rotate(135deg);
173
}
174
 
175
.color-wheel li:nth-child(6) a {
176
  -webkit-transform: rotate(90deg);
177
  -moz-transform: rotate(90deg);
178
  -ms-transform: rotate(90deg);
179
  -o-transform: rotate(90deg);
180
  transform: rotate(90deg);
181
}
182
 
183
.color-wheel li:nth-child(7) a {
184
  -webkit-transform: rotate(45deg);
185
  -moz-transform: rotate(45deg);
186
  -ms-transform: rotate(45deg);
187
  -o-transform: rotate(45deg);
188
  transform: rotate(45deg);
189
}
190
 
191
.color-wheel li:nth-child(8) a {
192
  -webkit-transform: rotate(0deg);
193
  -moz-transform: rotate(0deg);
194
  -ms-transform: rotate(0deg);
195
  -o-transform: rotate(0deg);
196
  transform: rotate(0deg);
197
}
198
 
199
.color-wheel li a {
200
  border: 2px solid #fff;
201
  border-radius: 50%;
202
  -webkit-box-shadow: inset 1px 1px 3px #000;
203
  box-shadow: inset 1px 1px 3px #000;
204
  color: #fff;
205
  display: block;
206
  height: 50px;
207
  line-height: 50px;
208
  text-align: center;
209
  width: 50px;
210
}
211
.color-wheel span.highlight {
212
  box-shadow: inset 1px 1px 5px #000, 0 0 15px yellow;
213
}
214
 
215
.color-wheel li:nth-child(1) a {
216
  background: #db9b5e;
217
}
218
.color-wheel li:nth-child(2) a {
219
  background: #c8b148;
220
}
221
.color-wheel li:nth-child(3) a {
222
  background: #8ab34b;
223
}
224
.color-wheel li:nth-child(4) a{ background: #51b5a3; }
225
.color-wheel li:nth-child(5) a{ background: #4e7d8d; }
226
.color-wheel li:nth-child(6) a { background: #5c6182; }
227
.color-wheel li:nth-child(7) a { background: #926174; }
228
.color-wheel li:nth-child(8) a { background: #c44646; }
 
JavaScript 
$(function(){
1
$(function(){
2
  $('a').draggable({
3
    cursor: 'move',
4
    helper: function(){
5
      var foo = $('<a href="#" style="transform: ' + $(this).data('rotate') + ';"></a>');
6
      return foo;
7
    },
8
    opacity: 0.35
9
  });
10
  $('#mixer').droppable({
11
    activate: function(event, ui) {$('#mixer').addClass('highlight');},
12
    deactivate: function(event, ui){$('#mixer').removeClass('highlight');},
13
    drop: function(event, ui){
14
      $('#mixer').css({background: ui.draggable.css('backgroundColor')});
15
    }
16
  });
17
});
 

Untitled

CSSDeck G+