Cara Membuat Icon Cantik Berganti Warna

Membuat icon cantik seperti saya sampaikan kemarin tidaklah sulit. Sedulur pun ternyata 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 sedulur 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 sedulur 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 sedulur 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. Sedulur bisa juga menambah alt, title, target, dan lain sebagainya.

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

Catatan Andy MSE:

  1. Tulisan dan icon berganti warna ini terinspirasi dari klip Derita Koepoe Biroe.
  2. Oprek-oprek ini dilakukan setelah sekian lama menyimak dengan seksama BELAJAR HTML. Worship dah! (worship)
  3. Gambar-gambar di tulisan ini semua disiapkan menggunakan GIMP bawaan Ubuntu 10.04 Lucid Lynx.

Post to Twitter Post to Plurk Post to Facebook Send Gmail

Related Posts

49 thoughts on “Cara Membuat Icon Cantik Berganti Warna

  1. mantap surantap kang, wah sy baru tau infonya buat ganti2 icon itu, kirain pake flash, ternyata pake pengkodean css…

  2. (doh)
    sedang seru-serunya mengikuti pelajaran dengan seksama…endingnya menampilkan link blog yang sudah berbulan-bulan tidak pernah dijenguk penulisnya (tersipu_mampus) (blush) (ninja)

    worship (worship) dah!
    .-= sedulur Pojok Pradna menampilkan tulisan… 3 Kata 3 Cerita =-.

  3. Berhubung saya blogger ber kategori tuwir maka mbacanya harus pelan2, ptakteknya juga tambah pelan2.
    Terima kasih atas tipnya.

    Salam hangat dari BlogCamp yang sedang menggelar acara Love Song in the Blog dengan tali asih menarik.
    Nek panjenengan nggak ikut termasuk golongan orang2 yang merugi karena pasti nggak dapat buku.
    Lha kalau ikut siapa tahu dapat, lak gitu tho mas.he he he
    .-= sedulur BlogCamp menampilkan tulisan… Termehek-mehek Sampai Terkapar =-.

  4. weeeee lha dalah…kok njlimet tenan.
    Tak simak dulu ya mas, entar tak coba membuat deh.
    Terima kasih atas tipnya yang ciamik

    Salam hangat dari Plesiran, media untuk mempromosikan pariwisata daerah anda secara gratis. Pengirim artikel akan mendapatkan tali asih berupa buku yang menarik dan bermanfaat jika artikelnya di post di Plesiran.
    Silahkan bergabung di Plesiran dan rasakan sensasinya.

    .-= sedulur Plesiran menampilkan tulisan… Pesona Buttu Kabobong =-.

  5. Saya Sekar dari perusahaan start up Indonesia bernama SITTI. Kami akan membagikan 5 iPad untuk blogger/pemilik situs yang mendaftarkan situsnya ke sittibelajar.com/ref_from.php?ref=email_blast dan memasang script SITTI sebelum Jumat, 1 Oktober 2010 jam 12.00 malam.

    • Yth Sekar: saya menghargai usaha anda dalam mempromosikan produk anda, akan tetapi menurut saya tidak perlu diikuti dengan tindakan yang bersifat SPAMMING. Saya juga sudah berusaha untuk menghargai anda dengan mendaftar dan memasang skrip untuk SITTI. Bila anda ingin meneruskan tindakan ini, dipersilahkan diisikan di Komentar Bebas, bukan dengan berkomentar di tulisan-tulisan saya dengan komentar yang sama sekali tidak sesuai dengan topik tulisan. Mohon diperhatikan!!!…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>