Logo Header Blog Keren menggunakan css

Anonymous

13 Comments

20:41

Logo Header Blog Keren menggunakan css

Logo Header Blog Keren menggunakan css - cukup Bingung Juga saya memberikan post Ini Judul Karena Saya Pun Tidak Mengerti.Karena Ini Bisa Juga Disebut Cara Membuat Judul Blog Keren Atau Membuat header Blog Keren.dan Juga Cara Membuat Logo Blog Keren. jadi Saya Bingung Memilih Judul Yang Ada Diatas itu.Dari Bingung Langsung Saja deh. Dan Tutorial ini saya kutip Dari Opic Blog . Dan Untuk Yang Pensaran Langsung Simak Saja Gan.

One Blog

Dan Untuk Source Nya Silahkan Lihat Kode Dibawah Ini.

.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> Kode Ini.

<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>

Sekian Artikel tentang Logo Header Blog Keren menggunakan css Semoga Bermanfaat.

Logo Header Blog Keren menggunakan css(Single Link)

Jika ada masalah, hubungi saya di :

• Twitter : Susi't
• FB : Susi
• Regards, Admin Susi

Like Juga Fanspage Kami :