logo Opic Blog menggunakan css

29 Sep 2013

Sekarang saya akan share logo yang di pakai Opic Blog Mugkin sobat sobat sudah tau lewat page source. Logo opic blog murni menggunakan css...

Opic Blog

.site-logo {
  border:none;
  display:block;
  width:155px;
  height:50px;
  position:relative;
  text-decoration:none;
}
.site-logo span,
.site-logo span:before,
.site-logo span:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
.site-logo .char-o {
  border:8px solid #fff;
  width:36px;
  border-radius:50px;
  -webkit-transition:all .5s ease-out 0s;
  -moz-transition:all .5s ease-out 0s;
  -ms-transition:all .5s ease-out 0s;
  -o-transition:all .5s ease-out 0s;
  transition:all .5s ease-out 0s;
}
.site-logo .char-b {
  border:5px solid #fff;
  width:15px;
  top:14px;
  bottom:14px;
  left:14px;
  -webkit-border-radius:0 4px 4px 0;
  -moz-border-radius:0 4px 4px 0;
  border-radius:0 4px 4px 0;
  -webkit-transition:all .7s ease-in-out 0s;
  -moz-transition:all .7s ease-in-out 0s;
  -ms-transition:all .7s ease-in-out 0s;
  -o-transition:all .7s ease-in-out 0s;
  transition:all .7s ease-in-out 0s;
}
.site-logo .char-b:before {
  border-top:4px solid #fff;
  top:4px;
  right:0;
  left:0;
}
.site-logo .char-pic,
.site-logo .char-log {
  font:normal normal 40px/100% "Arial Narrow",Arial,Sans-Serif;
  -webkit-transition:all .5s ease-in-out .5s;
  -moz-transition:all .5s ease-in-out .5s;
  -ms-transition:all .5s ease-in-out .5s;
  -o-transition:all .5s ease-in-out .5s;
  transition:all .5s ease-in-out .5s;
}
.site-logo + h1 {display:none}
.site-logo:hover .char-o {
  -webkit-box-shadow:0 0 1px white,0 0 3px #00f,0 0 10px #00f,0 0 20px #00f;
  -moz-box-shadow:0 0 1px white,0 0 3px #00f,0 0 10px #00f,0 0 20px #00f;
  box-shadow:0 0 1px white,0 0 3px #00f,0 0 10px #00f,0 0 20px #00f;
}
.site-logo:hover .char-pic {
  color:white;
  left:52px;
}
.site-logo:hover .char-b {
  left:100px;
  -webkit-box-shadow:0 0 1px #900,0 0 3px #900,0 0 10px #900,0 0 20px #900;
  -moz-box-shadow:0 0 1px #900,0 0 3px #900,0 0 10px #900,0 0 20px #900;
  box-shadow:0 0 1px #900,0 0 3px #900,0 0 10px #900,0 0 20px #900;
}
.site-logo:hover .char-log {
  color:white;
  left:127px;
  font-size:20px;
  top:15px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}

Untuk pemasangan nya saya letakkan di bawah <header>

<a class='site-logo' href='/'>
  <span class='char-o'>O</span><span class='char-pic'>pic</span>
  <span class='char-b'>B</span><span class='char-log'>log</span>
</a>

Itulah cara membuat / bikin logo opic blog menggunakan css

css - logo

Taufik 09.54