A CodePen by Maik. Logo - Buntepixel 07/2013 - Logo fpr buntepixel.org

index.html

<div id="alles">
<div id="pixel"></div>
<h1>BuntePixel</h1>
<h2>Not yet another private blog.</h2>
</div>

style.css

@keyframes color {
  0%   { background: #bf94ff;}
  40%  { background: #bf94ff;}
  43%  { background: #ddc7ff;}
  45%  { background: #bf94ff;}
  48%  { background: #ddc7ff;}
  50%  { background: #bf94ff;}
  100% { background: #bf94ff;}
}

#alles {width: 360px; margin: 2em auto;}

#pixel {
    height:0px;
    width:0px;
    border-width:30px;
    border-color: rgba(0, 0, 0, 0.80)
                  rgba(0, 0, 0, 0.50)
                  rgba(0, 0, 0, 0.30)
                  rgba(0, 0, 0, 0.60);
    border-style:solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin: 35px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    animation: color 5s infinite linear;
    -webkit-box-shadow: 1px 0px 2px 0px #cccccc;
    box-shadow: 1px 0px 2px 0px #cccccc;
}

h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 600;
  color: #ccc;
  padding-bottom: 1px;
  margin-bottom: 1px;
}

h2 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  font-size: 1.1em;
  line-heigh:0em;
  color: #ccc;
  padding-top:0px;
  margin-top:0px;
}