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

Sobat, today we will talk about making different color of text selection. Text selection yaitu bab yang kita blok dengan menggunakan klik kiri mouse dan menariknya sampai pada bab teks tertentu yang kita pilih atau semuanya. Secara default semua browser menggunakan warna biru pada background dan warna putih pada teks. Untuk mengetahuinya silakan teman pilih bab goresan pena 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 goresan pena yang di-blok oleh mouse selection.

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

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

untuk memperlihatkan pre-selection (pre selection yaitu warna setelah anda memblok suatu bab text, kemudian anda klik/pindah ke bab lain di komputer anda di luar browser. Misalnya setelah memblok bab 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 melaksanakan 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 arahan 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 yaitu pekerjaan pengecut! © buka-rahasia.blogspot.com