Tuesday, December 22, 2015

Membuat Efek-Efek Hover CSS Keren di Blog


Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang beberapa efek-efek hover keren yang bisa di pasang di blog. Pada dasarnya efek hover ini kita hanya menggunakan kode CSS dimana hover merupakan satu diantara beberapa pseudo elements yang terdapat pada CSS.

Pseudo elements hover pada dasarnya memungkinkan kita untuk menjalankan kode CSS baru untuk elemen yang sama ketika kursor melintas diatas objek tersebut, sehingga suatu efek bahwa bagian tersebut dapat diklik menjadi lebih jelas dan dapat segera diketahui oleh pengunjung situs tersebut saat melihat perubahan penampilan pada suatu objek ketika kursor melintas di atasnya.

Salah satu jenis kategori perintah dalam pengkodean CSS adalah "hover" yang merupakan perintah untuk melakukan tugas yang telah diberikan ketika kursor sedang fokus pada objek yang memiliki kode hover tersebut. Perintah hover juga merupakan salah satu jenis perintah yang paling sering digunakan dalam pengkodean CSS, selain karena penggunaannya relatif simpel juga karena dapat menghasilkan efek yang lebih baik dan sesuai dengan keinginan penulis kode tersebut. Penggunaan kode nya sederhana, cukup tambahkan element state hover pada kode CSS nya, misalnya.

.button:hover {
   ...
}

Baiklah mungkin pengantar diatas sudah cukup, langsung saja, pertama-tama silahkan sobat lihat beberapa live demo dari efek-efek hover yang saya maksud.

Demo

2D Transforms
<a rel="grow" class="button grow">Grow</a>
<a rel="shrink" class="button shrink">Shrink</a>
<a rel="pulse" class="button pulse">Pulse</a>
<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
<a rel="push" class="button push">Push</a>
<a rel="pop" class="button pop">Pop</a>
<a rel="rotate" class="button rotate">Rotate</a>
<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
<a rel="float" class="button float">Float</a>
<a rel="sink" class="button sink">Sink</a>
<a rel="hover" class="button hover">Hover</a>
<a rel="hang" class="button hang">Hang</a>
<a rel="skew" class="button skew">Skew</a>
<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>

Border Transitions
<a rel="border-fade" class="button border-fade">Border Fade</a>
<a rel="hollow" class="button hollow">Hollow</a>
<a rel="trim" class="button trim">Trim</a>
<a rel="outline-outward" class="button outline-outward">Outline Outward</a>
<a rel="outline-inward" class="button outline-inward">Outline Inward</a>
<a rel="round-corners" class="button round-corners">Round Corners</a>

Shadow and Glow Transitions
<a rel="glow" class="button glow">Glow</a>
<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>
<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>
<a rel="float-shadow" class="button float-shadow">Float Shadow</a>
<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>
<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>

Speech Bubbles
<a rel="bubble-top" class="button bubble-top">Bubble Top</a>
<a rel="bubble-right" class="button bubble-right">Bubble Right</a>
<a rel="bubble-bottom" class="button bubble-bottom">Bubble Bottom</a>
<a rel="bubble-left" class="button bubble-left">Bubble Left</a>
<a rel="bubble-float-top" class="button bubble-float-top">Bubble Float Top</a>
<a rel="bubble-float-right" class="button bubble-float-right">Bubble Float Right</a>
<a rel="bubble-float-bottom" class="button bubble-float-bottom">Bubble Float Bottom</a>
<a rel="bubble-float-left" class="button bubble-float-left">Bubble Float Left</a>

Curls
<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>
<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>
<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>
<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>

Pasang Kode CSS

Untuk bisa menggunakannya terlebih dahulu silahkan sobat tambahkan kode berikut dibawah kode <head>. Kemudian penggunaannya bisa dilihat pada kode demo diatas.

<link href='//rawgit.com/maringngerrang/css/master/hover.css' media='all' rel='stylesheet'/>

Mungkin cukup sekian dari saya kalau ada yang ingin sobat tanyakan silahkan sampaikan pada kotak komentar dibawah atau melalui halaman contact blog ini. Terima kasih, assalamu'alaikum.

Disqus Comments