JsFiddle Beta is coming!

JsFiddle Beta is coming!

by Сергей Тарасевич

HTML

<div id="wrapper"></div>

CSS

body {
  background: #D4D7DF url('http://img21.imageshack.us/img21/7868/mootoolifiedbg.png');
  font-family: 'Yanone Kaffeesatz', Helvetica, Arial, serif;
  text-shadow: 0 1px 0 #fff;
  text-align: center;
  margin: 20px;
  font-size: 10px;
  color: #fff;
}

h1 {
  -webkit-transition: all 0.12s ease-out;
  position: relative;
  text-transform: uppercase;
  text-shadow: 1px 1px #73799C, 2px 2px #73799C, 3px 3px #73799C, 4px 4px #73799C, 5px 5px #73799C, 6px 6px #73799C;
  top: -7px;
  left: -7px;
  font-size: 4em;
  margin-bottom: 20px;
}

h1:hover {
  text-shadow: 1px 1px #73799C, 2px 2px #73799C;
  top: -3px;
  left: -3px;
}

#wrapper {
  width: 1000px;
  margin: 0 auto;
}

span,
.ignore {
  position: relative;
  width: 18px;
  height: 18px;
  -webkit-box-shadow: 1px 1px #73799C, 2px 2px #73799C, 3px 3px #73799C, 4px 4px #73799C, 5px 5px #73799C, 6px 6px #73799C, 7px 7px #73799C, 8px 8px #73799C, 9px 9px #73799C;
  float: left;
  background: #fff;
  margin: 1px 1px 0 0;
  top: -8px;
  left: -8px;
  -webkit-transition: all 0.2s ease-out;
  color: #fff;
}

span:hover,
span.hover {
  text-decoration: none;
  -webkit-box-shadow: 1px 1px #73799C;
  top: 0;
  left: 0;
  background: #C7C9D7;
}

.ignore {
  background: red;
}

JavaScript

/* webkit only */

var n = 1 + (52 * 10),
  wrapper = $('wrapper'),
  l = [
  54, 55, 56, 57, 58, 62, 63, 64, 65, 69, 70, 71, 72,
  106, 107, 110, 111, 113, 114, 117, 118, 120, 121, 124, 125,
  158, 159, 162, 163, 165, 166, 169, 170, 172, 173, 176, 177, 
  210, 211, 214, 215, 217, 218, 221, 222, 224, 225, 231, 235, 235, 239, 240, 242, 243, 244, 245, 246, 248, 250, 251, 252, 253, 255, 256, 257, 258, 259, 
  262, 263, 266, 267, 269, 270, 273, 274, 276, 277, 279, 280, 281, 283, 284, 286, 287, 290, 292, 296, 300, 302, 309, 
  314, 315, 318, 319, 321, 322, 325, 326, 328, 329, 332, 333, 335, 337, 339, 341, 344, 348, 352, 354, 355, 356, 357, 361,
  366, 367, 370, 371, 373, 374, 377, 378, 380, 381, 384, 385, 387, 391, 393, 394, 395, 396, 400, 404, 409, 413,
  418, 419, 420, 421, 422, 426, 427, 428, 429, 433, 434, 435, 436, 439, 443, 445, 448, 452, 456, 458, 459, 460, 461, 465
  ];

for (var i = 1; i < n; ++i) {
  new Element('span', {
    'class': (l.contains(i) ? '' : 'boo')
  }).inject(wrapper);
}

var b = $$('span');
(function() {
  var c = this[1][$random(0, this[0])];
  if (c && c.hasClass('boo')) {
    c.addClass('hover');
  }
}).periodical(1, [n, b]);