Hex auto changer cloud

Hex auto changer

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class='container'>
    <div class='row-fluid'>
            <div class='span8 clearfix'>
<a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
    <a href="#" class="slant slant-page"><span>Andrew Pougher</span></a>
   </div> 
      <div class='span8 clearfix'>
        <a href="#" class="slant slant-page  badge"><span>Andrew Pougher</span></a>
        <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
        <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
      <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
        <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
        <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
        <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
       <a href="#" class="slant slant-page badge"><span>Andrew Pougher</span></a>
        </div> 
       </div> 
</div>

CSS

body{padding:40px;background:#ddd}


a.slant {
    color: #FFF;
    text-decoration:none;
      transition: background .25s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
	text-shadow: 1px 1px 0px #333;
       -webkit-box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.5);
}

a.slant:visited {
    color: #FFF;
}

a.slant:hover {
    background: #ec1939;
    color: #FFF;
    text-decoration: none;
}

.slant {
    display: inline-block;
    text-align: center;
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    transform: skewX(-10deg);
    font-family: "Open Sans", Verdana, sans-serif;
    font-weight: 600;
    font-style: normal;
}





a.slant.slant-page {
 font-family: "Open Sans", Verdana, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: .78571em;
    line-height: 0.5323em;
    padding: 8px 5px 8px;
    margin:2px;
    text-transform: uppercase;
    color: #FFF;
}

a.slant.slant-page:visited {
    color: #FFF;
}

a.slant.slant-page:hover {
    color: #FFF;
    background: #000 !important;
}

JavaScript

$(function() {
  setInterval(updateColors, 3000);
});


function whoColor() {
var c = '#'+Math.floor(Math.random()*14241424).toString(16);
  return c  
}

function updateColors(){
$('a').each(function(){

$(this).css("background-color", whoColor())

});
}