Tips cepat: Tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3

crcl

Dalam tutorial ini kita akan coba membuat efek hover CSS3 menggunakan animation dan transform gambar lingkaran(circle) untuk meningkatkan interface desain web kalian. Ini terlihat jauh lebih menarik dengan menggunakan transition style pada gambar. efek transisi/animasi ini full menggunakan CSS3 tanpa Javascript/JQuery, jadi kali ini kita akan membuat efek hover spesial pada CSS3.

Perlu dicatat ini hanya akan bekerja/berfungsi dengan baik pada browser yang support CSS3.

Kalian bisa melihat preview/demonya disini

Mari kita mulai dengan markup HTML

Struktur markupnya kurang lebih terlihat seperti ini :

<div id="skin">
   <p class="icon"></p>
   <a href="http://trustme.co.id/" class="fdw_left">Kiri</a>
   <a href="http://trustme.co.id/" class="fdw_right">Kanan</a>
</div>

 CSS

Dan CSS nya memiliki struktur seperti ini :

#skin {
  position:relative;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border:10px solid rgba(255,255,255,.10);
  width:284px;
  height:284px;
  overflow:hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s  ease;
  -o-transition: all .3s  ease;
  -ms-transition: all .3s  ease;
  transition: all .3s ease;
}
.fdw_left,
.fdw_right {
  float:left;
  width:50%;
  height:100%;
  margin:0;
  text-align:center;
  line-height:280px;
  text-decoration:none;
}
.fdw_right {
  border-radius:0 142px 142px 0;
  -moz-border-radius:0 142px 142px 0;
  -webkit-border-radius:0 142px 142px 0;
}
.fdw_left {
  background-color:#fff;
  border-radius:142px 0 0 142px;
  -moz-border-radius:142px 0 0 142px;
  -webkit-border-radius:142px 0 0 142px;
  color:#1e2a2a;
  text-indent:-30px;
}
.fdw_right {
  background-color:#1e2a2a;
  color:#FFFFFF;
  text-indent:35px;
}
#skin .icon {
  width:71px;
  height:77px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-39px auto 0 -35px;
  background: url(a.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}
#skin a {
  font-weight:700;
  font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
  text-decoration:none;
  text-transform:uppercase;
  font-size:20px;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -o-transition: background-color .3s;
  -ms-transition: background-color .3s;
  transition: background-color .3s;
}
#skin a:hover {
  background-color:#00b68f;
  color:#FFF;
}
#skin:hover {
  border:10px solid rgba(255,255,255,.5);
}
#skin:hover .icon {
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari and Chrome */
  background: url(b.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}

 Nah, sekarang kita sudah berhasil membuat efek hover CSS3 dengan gambar lingkaran(circle).

Lihat demonya disini

Sekian tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3. Semoga bisa membantu. Terima kasih..

Comments

comments