Membuat Warna Berbeda Pada Text Selection (Bagian Teks yang di-Blok)

Jumat, 25 Februari 2011

Membuat Warna Berbeda Pada Text Selection (Bagian Teks yang di-Blok)

22.54

konsultan

Sobat, today we will talk about making different color of text selection. Text selection adalah bagian yang kita blok dengan menggunakan klik kiri mouse dan menariknya hingga pada bagian teks tertentu yang kita pilih atau semuanya. Secara default semua browser menggunakan warna biru pada background dan warna putih pada teks. Untuk mengetahuinya silakan sobat pilih bagian tulisan apa pun pada posting ini (seperti ketika mau co-pas tulisan, tapi jangan suka co-pas tanpa ijin loh ya :P) dan lihatlah perbedaannya. Saya menggunakan warna merah sebagai background dan putih pada tulisan yang di-blok oleh mouse selection.

Untuk meng-hack browser dan melakukan override fungsi tersebut pada blog/website saat ini sangatlah memungkinkan. Kehadiran CSS3 telah banyak memberikan perkembangan dan perubahan pada dunia desain web. Untuk membuat hasil seperti di atas, digunakan selector ::selection. Tipe ini didukung oleh semua browser kecuali Internet Explorer. Untuk Mozilla Firefox perlu ditambahkan -moz- sebagai notifikasi agar dikenali oleh browser tersebut:

selection::{color:#ff0000;}
::-moz-selection{color:#ff0000;}

untuk memberikan pre-selection (pre selection adalah warna setelah anda memblok suatu bagian text, kemudian anda klik/pindah ke bagian lain di komputer anda di luar browser. Misalnya setelah memblok bagian text pada posting ini, silahkan klik area kosong di toolbar komputer anda):

pre::selection {color:#f5f5f5;}
pre::-moz-selection {color:#f5f5f5;}

Untuk menambah background text, tambahkan descriptor background, misalnya:

selection::{background:#000000;color:ff0000}

So, untuk membuatnya secara lengkap dan melakukan generalisasi, masukkan script berikut ini sebelum/di atas </head> (use Ctrl+F) di editor HTML anda:

<style type='text/css'>
::selection {background:#cc0000;color:#ffffff;}
::-moz-selection{background:#cc0000;color:#ffffff;}
code::selection {background: #333333;color:#ffffff;}
code::-moz-selection {background: #333333;color:#ffffff;}
pre::selection {background: #44ceff;color:#ffffff;}
pre::-moz-selection {background: #44ceff;color:#ffffff;}
</style>

Ganti kode warna background dan color sesuai dengan selera anda. Lihat kode-kode warna di Hex Color Code Chart Generator. Gunakan mix warna yang proporsional dan kontrastif pada ::selection dan ::-moz-selection. Kemudian simpan dan coba hasilnya.

mencuri adalah pekerjaan pengecut! © budihaeruman.blogspot.com