Membuat Icon Cantik Berganti Bentuk dan Warna

Membuat icon cantik berganti bentuk dan warna tidaklah sulit. Anda pun pasti sudah banyak yang mengetahuinya. Tapi, tetap saja ini saya tulis kembali sebagai catatan saya.

Pada dasarnya, icon ini hanya memanfaatkan perilaku kursor. Ketika sebuah icon ditampilkan, tentunya merujuk ke suatu gambar tertentu. Nah, ketika kursor melewatinya (hover), rujukan itu diganti saja dengan gambar lain. Bisa juga ditambah variasi ketika suatu icon yang mengarah ke link tertentu, berganti gambar juga ketika link tersebut sudah pernah dikunjungi (visited).

Yang sederhana, hanya dibuat dua variasi saja. Bisa menggunakan dua gambar, yang pertama sebagai rujukan default, yang kedua sebagai rujukan hover. Untuk lebih ringkas, bisa juga menggunakan satu gambar saja yang dibuat memanjang, bisa secara horisontal maupun secara vertikal. Salah satu bagian, bisa atas/bawah atau kanan/kiri, digunakan sebagai rujukan default, dan bagian lain sebagai rujukan hover.

Pada contoh yang saya buat, gambarnya cukup satu saja memanjang secara vertikal.

Langkah-langkahnya adalah sebagai berikut:

Menyiapkan gambar

Pada contoh ini, saya membuat gambar dengan lebar 60px dan panjang 140px. Bagian bawah saya biarkan berwarna, sedangkan bagian atas di-desature untuk menghilangkan warnanya sehingga gambar menjadi grayscale. Penempatannya harus tepat karena bagian atas merupakan cermin bagian bawahnya.

Contoh gambarnya seperti ini:

Hasilnya nanti seperti ini:

Bisa juga gambarnya divariasi tidak hanya berganti warna melainkan berubah bentuk.

Contoh gambarnya seperti ini:

Hasilnya nanti seperti ini:

Contoh yang kedua ini agak berbeda karena saya menggunakan gambar bagian atas sebagai default-nya, dan bagian bawah sebagai hover-nya.

Setelah gambar-gambarnya siap, upload ke tempat penitipan yang anda sukai.

Menyiapkan aturan-aturan di dalam css

Langkah kedua adalah menyiapkan aturan-aturan yang disisipkan di css (pada beberapa CMS ada di style.css, pada blogspot sisipkan saja pada "Edit HTML").

Aturan-aturan ini bisa ditempatkan di section/blok yang anda suka, atau bisa juga dibuatkan section tersendiri. Pada contoh ini, saya menempatkan di bawah section widget karena nantinya saya akan menggunakan icon ini melalui widget. Ada beberapa hal yang perlu diatur:

Contoh yang saya buat dengan id=-icon-menu adalah sebagai berikut:

#icon-menu{
background:transparent;
padding:0 0;
width: auto;}
#icon-menu ul{
height:70px; -->>ukuran ini adalah setengah panjang gambar icon.
color: #atur sendiri;
list-style-type:none;
overflow:hidden;}
#icon-menu li {
width: 60px; -->>ukuran ini adalah lebar gambar icon.
height:70px; -->>ukuran ini adalah setengah panjang gambar icon.
display:block;
float:right; -->>urutan gambar dari kiri ke kanan.
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 5px 0px 0px;
padding:0px 0px;
color:#atur sendiri;}
#icon-menu li a {
display:block;
width: 60px; -->>ukuran ini adalah lebar gambar icon.
height:70px; -->>ukuran ini adalah setengah panjang gambar icon.
display:block;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 5px 0px 0px;
padding:0px 0px;}
#icon-menu li a:hover {
text-decoration: none;}

Perhatikan juga aturan-aturan bulleting ul dan li pada section di atasnya. Bilamana merupakan section tersendiri, beri aturan tambahan agar gambar bebas dari bullet yang biasa diatur menyertai ul dan li. Pada beberapa tema tertentu, hasil susunan icon akan vertikal, bukan horisontal, oleh karena itu, beri aturan tambahan agar susunan icon ter-display secara inline.

Selanjutnya, arahkan gambar menyesuaikan dengan status kursor:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(url tempat gambar dititipkan) no-repeat left top;
display: block;
height: 70px; -->> setengah panjang gambar
width: 60px;} -->> lebar gambar
a#m1:hover {background-position: left bottom;}
a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url tempat gambar dititipkan) no-repeat left top;
display: block;
height: 70px; -->> setengah panjang gambar
width: 60px;} -->> lebar gambar
a#m2:hover {background-position: left bottom;} -->> dan selanjutnya dibuat sesuai kebutuhan dan selera.

Bila menggunakan dua gambar atau lebih, tentunya aturan untuk link, visited, active, dan hover merujuk ke gambar tersendiri. Karena ini menggunakan satu gambar, hanya dibuat dua aturan saja, untuk default, link, visited, dan avtive menggunakan gambar bagian atas, sedangkan untuk hover menggunakan gambar bagian bawah.

Menempatkan icon

Langkah terakhir adalah menempatkan icon di tempat yang anda sukai. Pada contoh ini, saya menempatkan sebagai widget yang di-hook sebelum body container.

<div id="icon-menu">
<ul><li><a href="http://contohlink-1.com/" id="m1" title="Icon-Menu-1"></a></li>
<li><a href="http://contohlink-2.com/" id="m2" title="Icon-Menu-2"></a></li></ul>
</div>

Silahkan menambah sendiri m1, m2, m3, dan selanjutnya sesuai kebutuhan dan selera. Anda bisa juga menambah alt, title, target, dan lain sebagainya.

Mohon dikoreksi bilamana ada kekeliruan, mohon ditambah bilamana ada kekurangan!... :-)

(Dikutip dari Andy MSE)