Cara Membuat Blog Badge dengan Effect Menggunakan CSS

Blog Badge dengan Effect Menggunakan CSS. Berikut ini kami akan membagikan Badge atau lencana yang dapat anda gunakan untuk mempercantik tampilan blog anda. Misalya anda ingin mempercantik title blog anda ataupun menggunakannya untuk widget blogger anda.

Blog badge berikut ini berbentuk lingkaran dangan transisi Css yang indah berwarna warni ketika kursor mouse menyentuhnya. Jika sobat tertarik dengan efek-efek blog mungkin sobat dapat membaca artikel sebelumnya seperti widget sosial efek hover atau membuat efek gambar bergetar atau membuat efek tooltip dengan CSS.

Untuk demonya sobat dapat melihat langsung gambar dibawah ini. Bagaimana keren bukan? tertarik untuk menggunakannya? ok berikut adalah Live demo dan kodenya CSSnya.

LIVE DEMO :

seocips

CSS :

.circle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsx2xDOSGSPza9A2pBOekwhupFvopulxY_T5Ct1muZCN4FPgoehnjKbi38GDSKVacYWu4po4uoN3pAS4p1XwQk-f752MXSbLuG5XJS9oIfc5z-ezgPYZn815bWkLzRPExe_T2GGVd_NweQ/s310/507cc1.gif);border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}

HTML :

<div class="circle">
<h4>
<a href="http://www.seocips.com">seocips</a></h4>
</div>

Sekian sobat yang dapat dibagikan untuk saat ini, lihat juga Tutorial blog terbaru tutorial bangsat yang lainnya. Semoga cara membuat blog badge dengan efek CSS ini bermanfaat. Ok selamat mencoba. Happy Blogging Salam Blogger. . .

Terima Kasih telah membaca artikel tentang Cara Membuat Blog Badge dengan Effect Menggunakan CSS . Silahkan baca artikel lainnya di daftar isi.

• Tweet
• Share
• Share
• Share
• Share

Unknown

Judul : Cara Membuat Blog Badge dengan Effect Menggunakan CSS .
Ditulis oleh : Unknown .
Pada hari : Monday, 4 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

×

Related Post