Membuat Header Logo DHF Menggunakan CSS

Newbanie Blog - Setelah di post sebelumnya kita membuat sitemap, kali ini saya akan memberikan tutorial mengenai Cara Membuat Header Logo Blog Menggunakan CSS. Logo yang saya gunakan kali ini terinspirasi dari blognya mas Dharla Ferdana ( bener gak ya gitu tulisannya? wkwk) yang beralamat dhf.web.id .
Seperti inilah penampakannya.

Logo tersebut dibuat murni menggunakan css dengan penambahan animasi keyframe serta efek hover yang keren. Untuk demonya silakan buka blog ini -> dhf.web.id

CSS

@-webkit-keyframes updown {

  0% {top:0}

  100% {top:-5px}

}

@-moz-keyframes updown {

  0% {top:0}

  100% {top:-5px}

}

@-ms-keyframes updown {

  0% {top:0}

  100% {top:-5px}

}

@-o-keyframes updown {

  0% {top:0}

  100% {top:-5px}

}

@keyframes updown {

  0% {top:0}

  100% {top:-5px}

}



@-webkit-keyframes dhf {

  0%   {margin-left:0px;}

  100% {margin-left:30px;}

}

@-moz-keyframes dhf {

  0%   {margin-left:0px;}

  100% {margin-left:30px;}

}

@-ms-keyframes dhf {

  0%   {margin-left:0px;}

  100% {margin-left:30px;}

}

@-o-keyframes dhf {

  0%   {margin-left:0px;}

  100% {margin-left:30px;}

}

@keyframes dhf {

  0%   {margin-left:0px;}

  100% {margin-left:30px;}

}



/* Header */

#header-wrapper {

  background-color: #333;

  color: white;

  margin-bottom: 1%;

  -webkit-transition: all .5s ease-out;

  -moz-transition: all .5s ease-out;

  -ms-transition: all .5s ease-out;

  -o-transition: all .5s ease-out;

  transition: all .5s ease-out;

  padding: 8px 15px 18px;

}



#header {margin: 0;}

#header a,#header a:visited {color: white;}



#header .description {

  font: normal normal 100%/1.5em Alike,Georgia,"URW Bookman L",Serif;

  color: #999;

  padding: 5px 30px 0;

  margin: 0 0;

}



#header-logo {

  position: relative;

  width: 84px;

  height: 35px;

  display: block;

  margin: 10px 30px 5px;

}



#header-logo span,

#header-logo span:before,

#header-logo span:after {

  content: "";

  position: absolute;

  display: block;

}



#header-logo .char-d {

  width: 7px;

  border: 7px solid white;

  top: 0;

  bottom: 0;

  left: 0;

}



#header-logo .char-d:before {

  border: 2px solid transparent;

  top: -7px;

  right: -7px;

  border-color: #333 #333 transparent transparent;

}



#header-logo .char-h {

  width: 7px;

  top: 0;

  bottom: 0;

  left: 22px;

  border-left: 7px solid white;

  border-right: 7px solid white;

}



#header-logo .char-h:before {

  width: 7px;

  height: 0;

  top: 14px;

  border-top: 7px solid white;

  left: 0px;

  right: 0px;

}



#header-logo .char-f {

  width: 9px;

  top: 0;

  bottom: 0;

  left: 44px;

  border: 7px solid white;

  border-right: none;

  border-bottom: none;

}



#header-logo .char-f:before {

  top: 8px;

  left: 0;

  width: 6px;

  border-top: 7px solid white;

}



#header-logo .char-symb {

  position: absolute;

  top: 14px;

  left: 59px;

  width: 35px;

  height: 3px;

  border: 3px solid #5498C9;

  -webkit-border-radius: 52px;

  -moz-border-radius: 52px;

  border-radius: 52px;

  -webkit-transform: rotate(540deg);

  -moz-transform: rotate(540deg);

  -ms-transform: rotate(540deg);

  -o-transform: rotate(540deg);

  transform: rotate(540deg);

}



#header-logo .char-symb:before {

  display: block;

  bottom: 4px;

  left: 4px;

  width: 23px;

  height: 23px;

  border: 2px solid transparent;

  border-bottom-color: white;

  border-left-color: white;

  -webkit-border-radius: 42px;

  -moz-border-radius: 42px;

  border-radius: 42px;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



#header-logo .char-symb:after {

  content: "";

  top: 11px;

  left: 4px;  

  width: 10px;

  height: 10px;

  background-color: white;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

}



#header-logo .char-symb span {

  content: "";

  top: 11px;

  left: auto;

  right: 4px;

  width: 10px;

  height: 10px;

  background-color: white;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

}



#header-logo:hover .char-symb:before, #header-logo:focus .char-symb:before, #header-logo:focus .char-symb:before {

  border-bottom-color: #ED1C24;

  border-left-color: transparent;

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -ms-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

}



#header-logo:hover .char-symb:after,#header-logo:hover .char-symb span {background-color: #5498C9;}



#header-logo:hover .char-symb .trip,#header-logo:hover .char-symb .trap {background-color: white;}



#header-logo:hover .char-symb,#header-logo:focus .char-symb,#header-logo.focused .char-symb {

  top:-3px;

  left:62px;

  width:35px;

  height:35px;

  border-color: yellow;

  -webkit-transform: rotate(-1deg);

  -moz-transform: rotate(-1deg);

  -ms-transform: rotate(-1deg);

  -o-transform: rotate(-1deg);  

  transform:rotate(-1deg);

  -webkit-animation:updown .2s infinite alternate .5s;

  -moz-animation:updown .2s infinite alternate .5s;

  -ms-animation:updown .2s infinite alternate .5s;

  -o-animation:updown .2s infinite alternate .5s;

  animation:updown .2s infinite alternate .5s;

}



#header-logo .char-symb,#header-logo .char-symb:after,#header-logo .char-symb span {

  -webkit-transition: all 2s ease-in-out;

  -moz-transition: all 2s ease-in-out;

  -ms-transition: all 2s ease-in-out;

  -o-transition: all 2s ease-in-out;

  transition: all 2s ease-in-out;

}



#header-logo .char-symb .trip {

  top: 14px;

  left: auto;

  right: 7px;

  width: 4px;

  height: 4px;

  background-color: #ED1C24;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}



#header-logo .char-symb .trap {

  top: 14px;

  right: 24px;  

  width: 4px;

  height: 4px;

  background-color: #ED1C24;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  z-index:1;

}



#header-logo .info {

  display:block;

  font:bold 14px Arial,Sans-Serif;

  line-height:34px;

  color:white;

  padding:0px 15px;

  background-color:blue;

  -webkit-border-radius:10px;

  -moz-border-radius:10px;

  border-radius:10px;

  position:absolute;

  top:0;

  left:110px;

  z-index:99;

  margin-right:30px;

  visibility:hidden;

  opacity:0;

  -webkit-transform:scaleY(-1);

  -moz-transform:scaleY(-1);

  -ms-transform:scaleY(-1);

  -o-transform:scaleY(-1);

  transform:scaleY(-1);

  -webkit-transition:all 0.26s ease-out;

  -moz-transition:all 0.26s ease-out;

  -ms-transition:all 0.26s ease-out;

  -o-transition:all 0.26s ease-out;

  transition:all 0.26s ease-out;

}



#header-logo .info:after {

  content:"";

  width:0px;

  height:0px;

  border:7px solid transparent;

  border-right-color:blue;

  position:absolute;

  top:10px;

  right:100%;

}



#header-logo:hover .info {

  visibility:visible;

  margin-right:15px;

  opacity:1;

  -webkit-transform:scaleY(1);

  -moz-transform:scaleY(1);

  -ms-transform:scaleY(1);

  -o-transform:scaleY(1);

  transform:scaleY(1);

  -webkit-animation:dhf .3s infinite alternate .5s;

  -moz-animation:dhf .3s infinite alternate .5s;

  -ms-animation:dhf .3s infinite alternate .5s;

  -o-animation:dhf .3s infinite alternate .5s;

  animation:dhf .3s infinite alternate .5s;

}

HTML

<a href='http://www.dhf.web.id/' id='header-logo' itemprop='url'>
    <span aria-hidden='true' class='accessible-hidden' itemprop='name'></span>
    <span aria-hidden='true' class='char-d'></span>
    <span aria-hidden='true' class='char-h'></span>
    <span aria-hidden='true' class='char-f'></span>
    <span class='char-symb' title='Dharla Ferdana'>
      <span></span>
      <span aria-hidden='true' class="trip"></span>
      <span aria-hidden='true' class="trap"></span>
    </span>
    <span class="info">Who??</span>
  </a> 

Tweet