dnl logo

Probably my new logo

by danielfilho

HTML

<div id="logo"></div>
<ul style="margin-top:30px">
    <li><a href="#" class="logo">Logo</a></li>
    <li><a href="#" class="pin">Pin</a></li>
    <li><a href="#" class="drop">Drop</a></li>
    <li><a href="#" class="bullet">Bullet</a></li>
    <li><a href="#" class="pointer">Pointer</a></li>
</ul>

CSS

@import url('http://fonts.googleapis.com/css?family=Rokkitt');
body{ margin:50px; }
ul, li{ margin:0; padding:0; list-style:none outside; font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif; font-size:13px; }
li{ display:inline-block; }
li a { 
    display: inline-block;
    background-color: #4D90FE;
    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
    background-image: linear-gradient(top,#4d90fe,#4787ed);
    border: 1px solid #3079ED;
    color: white;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    cursor: default;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    height: 27px;
    line-height: 27px;
    min-width: 54px;
    padding: 0 8px;
    text-decoration: none;
}

li a:hover{
border: 1px solid #2F5BB7;

background-color: #357AE8;
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: linear-gradient(top,#4d90fe,#357ae8);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

li a:active{
-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
}

#logo{
    display:block;
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #999;
    border-radius:50%;
    border-bottom-left-radius:0;
    box-shadow:1px 1px 5px 1px #999;
    text-decoration:none;

    background: rgb(200,200,200);
    background:...

JavaScript

document.addEventListener("DOMContentLoaded", function(){
    var win = window,
        doc = win.document,
       logo = doc.getElementById("logo");

    // logo
    doc.getElementsByClassName("logo")[0].addEventListener("click", function(){
        console.log('clicked');
        logo.style.webkitTransform = "rotate(0deg)";
    });

    // pin
    doc.getElementsByClassName("pin")[0].addEventListener("click", function(){
        logo.style.webkitTransform = "rotate(315deg)";
    });

    // drop
    doc.getElementsByClassName("drop")[0].addEventListener("click", function(){
        logo.style.webkitTransform = "rotate(135deg)";
    });

    // bullet
    doc.getElementsByClassName("bullet")[0].addEventListener("click", function(){
        logo.style.webkitTransform = "rotate(45deg)";
    });

    // pointer
    doc.getElementsByClassName("pointer")[0].addEventListener("click", function(){
        logo.style.webkitTransform = "rotate(225deg)";
    });
});