Ajax Loader
HTML 
<link href="http://blog.zaku.eu/css/codepen.font.css" rel="stylesheet" />
1
<link href="http://blog.zaku.eu/css/codepen.font.css" rel="stylesheet" />
2
<div class="color">
3
  <span></span>
4
</div>
5
<div class="menu">
6
  <input type="checkbox" checked id="menu-collapsed" name="menu-collapsed" />
7
  <div class="menu-content">
8
    <h2>How to ...?</h2>
9
    <table>
10
      <tr><th colspan="2"><h3>Change color:</h3></th></tr>
11
      <tr><td>hue:</td><td>mouse left/right</td></tr>
12
      <tr><td>saturation:</td><td>scroll up/down</td></tr>
13
      <tr><td>lightness:</td><td>mouse up/down</td></tr>
14
      <tr><th colspan="2"><h3>Lock color:</h3></th></tr>
15
      <tr><td>click:</td><td>lock color</td></tr>
16
      <tr><td>dblclick:</td><td>release lock</td></tr>
17
      <tr><td colspan="2"><h3>Want more?</h3></td></tr>
18
      <tr><td colspan="2"><a href="http://colourco.de">colourco.de</a></td></tr>
19
    </table>
20
    <a href="https://twitter.com/TaminoMartinius" class="twitter-follow-button" data-show-count="false"></a>
21
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
22
  </div>
23
  <div class="menu-switch">
24
    <label class="collapse" for="menu-collapsed">&lt;</label>
25
    <label class="rise" for="menu-collapsed">!</label>
26
  </div>
27
</div>
28
<b>W</b>
29
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
30
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
31
 
 
CSS 
html, body {
1
html, body {
2
  margin: 0;
3
  padding: 0;
4
  width: 100%;
5
  height: 100%;
6
  font-family: 'Open Sans Condensed', sans-serif;
7
}
8
 
9
a, a:visited, a:hover {
10
  color: inherit;
11
}
12
 
13
b {
14
  font-size: 1.5em;
15
  position: absolute;
16
  display: block;
17
  top: 0;
18
  left: 50%;
19
  margin: 0.5em 0 0 -1em;
20
  width: 2em;
21
  height: 1.5em;
22
  background-color: rgba(0, 0, 0, 0.25);
23
  font-family: RaphaelIcons;
24
  text-align: center;
25
  padding-top: 0.5em;
26
  border-radius: 0.5em;
27
  user-select: none;
28
  cursor: pointer;
29
}
30
 
31
.color {
32
  width: 100%;
33
  position: absolute;
34
  margin-top: -4em;
35
  text-align: center;
36
  top: 50%;
37
38
  span {
39
    display: inline-block;
40
    padding: 1em;
41
    border-radius: 1em;
42
    background-color: rgba(0, 0, 0, 0.25);
43
  }
44
}
45
 
46
.menu {
47
  font-size: 0.85em;
48
  position: relative;
49
  z-index: 10;
50
  user-select: none;
51
  width: 18em;
52
  .menu-content {
53
    transition: margin-left 1s;
54
    padding-left: 1em;
55
    background-color: rgba(0, 0, 0, 0.25);
56
    border-radius: 0 1em 1em 0;
57
    float: left;
58
    width: 13em;
59
    h2 {
60
      font-family: 'Handlee', cursive;
61
      font-weight: normal;
62
      margin-left: 1em;
63
      margin-bottom: 0.2em;
64
    }
65
    h3 {
66
      font-weight: normal;
67
      margin: 0.4em 0 0.2em 0;
68
    }
69
    table {
70
      margin-bottom: 1em;
71
    }
72
    ul {
73
      list-style: none;
74
    }
75
  }
76
  li, label  {
77
    color: rgba(252,251,250,0.5);
78
    cursor: pointer;
79
    transition-duration: 1.0s;
80
    &:hover {
81
      transition-duration: 0.3s;
82
      color: rgba(252,251,250,0.9);
83
    }
84
  }
85
  .menu-switch {
86
    padding-top: 12em;
87
    label {
88
      font-family: RaphaelIcons;
89
      background-color: rgba(0, 0, 0, 0.25);
90
      border-radius: 0 1em 1em 0;
91
      padding: 0.2em;
92
      font-size: 3em;
93
    }
94
  }
95
  input {
96
    display: none;
97
  }
98
  #menu-collapsed{
99
    &:checked{
100
      ~ .menu-content {
101
        margin-left: -14em;
102
      }
103
      ~ .menu-switch .rise {
104
        display: inline-block;
105
      }
106
      ~ .menu-switch .collapse {
107
        display: none;
108
      }
109
    }
110
    ~ .menu-switch .rise {
111
      display: none;
112
    }
113
  }
114
}
 
JavaScript 
h = ~~(Math.random() * 360)
1
h = ~~(Math.random() * 360)
2
s = 50
3
l = 50
4
lock = off
5
  
6
draw = () ->
7
  if lock is off
8
    $('b').hide()
9
    hsl = new d3.hsl h, s / 100.0, l / 100.0
10
    hcl = new d3.hcl hsl
11
    rgb = new d3.rgb hsl
12
    lab = new d3.lab hsl
13
    $('span').html ""
14
    $('span').append hsl.toString()
15
    $('span').append "<br /> rgb(#{rgb.r}, #{rgb.g}, #{rgb.b})"
16
    $('span').append "<br /> hsl(#{h}, #{s}%, #{l}%)"
17
    $('span').append "<br /> hcl(#{(~~hcl.h + 360) % 360}, #{hcl.c.toFixed(2)}%, #{hcl.l.toFixed(2)}%)"
18
    $('span').append "<br /> lab(#{lab.l.toFixed(0)}, #{lab.a.toFixed(0)}, #{lab.b.toFixed(0)})"
19
    $('body').css "background-color", "hsl(#{h}, #{s}%, #{l}%)"
20
    $('body').css "color", "rgb(#{Math.min(rgb.r + 96, 255)}, #{Math.min(rgb.g + 96, 255)}, #{Math.min(rgb.b + 96, 255)})"
21
  else
22
    $('b').show()
23
 
24
 
25
$(window).mousemove (e) ->
26
  maxX = window.innerWidth
27
  maxY = window.innerHeight
28
  x = e.pageX
29
  y = e.pageY
30
  h = ~~(x / maxX * 360)
31
  l = ~~(y / maxY * 10000) / 100
32
  draw()
33
  return
34
  
35
wheelEvent = (e) ->
36
  delta = if (e.wheelDelta || e.detail || e.originalEvent.wheelDelta || e.originalEvent.detail) > 0 then 1 else -1
37
  s = Math.max(0, Math.min(100, s + delta * 5))
38
  draw()
39
  return
40
 
41
$('body').bind "mousewheel", wheelEvent
42
$('body').bind "DOMMouseScroll", wheelEvent
43
 
44
$('b').click () ->
45
  lock = off
46
 
47
$(window).click () ->
48
  lock = on
49
 
50
$(window).dblclick () ->
51
  lock = off
52
53
$('b').mouseenter () ->
54
  $('b').html 'w'
55
 
56
$('b').mouseleave () ->
57
  $('b').html 'W'
58
  
59
hash = if location.hash.indexOf('(') > 0 then location.hash.substr(1) else location.hash
60
if hash.length > 0
61
  hsl = new d3.hsl hash
62
  h = hsl.h
63
  s = hsl.s * 100
64
  l = hsl.l * 100
65
  draw()
66
  lock = on
67
else
68
  draw()
 

Fullscreen colorpicker

CSSDeck G+