design

November 29, 2010 at 1:58 pm (Design) (, )

Tombol Rollover dengan CSS


Interaktifitas dalam sebuah situs web penting artinya bagi pengunjung situs. Dengan interaktifitas, Anda dapat lebih memberikan penekanan terhadap sebuah elemen, seperti link atau tombol contohnya. Kali ini kita akan membuat sebuah link yang disulap menjadi sebuah tombol rollover. Rollover adalah istilah bila kursor berada disebuah link maka link tersebut akan bereaksi. Kita akan membuat tombol rollover tersebut hanya dengan CSS, ya sesederhana itu…

Anda dapat melihatnya pada halaman Contoh.

Yang perlu kita siapkan adalah sebuah image yang bisa dibuat dengan menggunakan Photoshop seperti dibawah ini:

Tombol

Gambar diatas adalah gambar yang akan kita pergunakan dimana gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian yang ditempati kursor (Over/Rollover), pada contoh ini saya berinama file tersebut dengan nama tombol.gif.

gambar.gif

Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:

<a href="#">Tombol</a>

Nah, semudah itu. Sekarang kita buat CSS nya:

a {
display: block;
background: url(tombol.gif) top center;
width: 124px /*Lebar Tombol*/
height: 40px /*Tinggi Tombol*/
text-align: center; /*Supaya Teks Ditengah (vertical)*/
line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/
font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/
color: #fff; /*(Warna Hurus)*/
text-decoration: none; /*Jangan pergunakan garis bawah*/
}

a:hover { /*Posisi kursor diatas tombol*/
background: url(tombol.gif) bottom center;
}

Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Mudah bukan?

Specificity Pada CSS


CSS memiliki “sifat” yang dimana ia akan mengambil alih / override property yang sama yang telah di definisikan sebelumnya. Namun CSS memiliki apa yang dinamakan dengan specificity dimana hukum override ini tidak akan selalu berlaku.

perhatikan contoh berikut:

.warna {
color: Red;
}
.warna {
color: Blue;
}

Bila kode idatas diaplikasikan pada sebuah tag html, yang akan muncul adalah sebuah teks dengan warna biru (color: Blue;).

Lalu ubah css diatas menjadi:

p.warna {
color: Red;
}
.warna {
color: Blue;
}

Yang akan muncul kemudian adalah huruf dengan warna merah (color: Red;). Property color: Blue; tidak lagi menimpa fungsi diatasnya, karena p.warna memiliki nilai specificity lebih tinggi dari pada .warna.

Menghitung Specificity

Specificity ditentukan dari selector pada css:
HTML selector (p, div, ul) memiliki nilai specificity 1
Class Selector (.warna) memiliki nilai specificity 10
ID Selector (#warna) memiliki nilai specificity 100

div p (1 dimiliki div, 1 dimiliki p) memiliki nilai specificity 2
div.header (1 dimiliki div, 10 dimiliki .header) memiliki nilai specificity 11
#container .header (100 dimiliki #container, 10 dimiliki .header) memiliki nilai specifity 110

Lalu, untuk apakah mengetahui specificity ini? Specificity dapat digunakan untuk mengatur susunan document css untuk mempermudah penggunaan pada skala besar, menghindari penggunaan secara masif !important, menghemat penamaan selector dan dengan mudah mengatur style untuk selector yang memiliki nama yang sama.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: