Membuat Warna Berlawanan Pada Text Selection (Bagian Teks Yang Di-Blok) - Pendidikan Blog

Sobat, today we will talk about making different color of  text selection. Text selection yakni 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 kawan pilih bab goresan pena apa pun pada posting ini (seperti di saat mau co-pas tulisan, namun jangan suka co-pas tanpa ijin loh ya :P) dan lihatlah perbedaannya. Saya menggunakan warna merah selaku background dan putih pada goresan pena yang di-blok oleh mouse selection.

Untuk meng-hack browser dan menjalankan override fungsi tersebut pada blog/website di sekarang ini sangatlah memungkinkan. Kehadiran CSS3 sudah banyak menampilkan pertumbuhan dan pergeseran pada dunia konsep web. Untuk menghasilkan hasil seumpama di atas, digunakan selector ::selection. Tipe ini disokong oleh semua browser kecuali Internet Explorer. Untuk Mozilla Firefox perlu disertakan -moz- selaku notifikasi biar dipahami oleh browser tersebut:

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

untuk menampilkan pre-selection (pre selection yakni warna setelah anda memblok sebuah bab text, lalu 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 memperbesar background text, tambahkan descriptor background, misalnya:

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

So, untuk menjadikannya secara lengkap dan menjalankan 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 isyarat 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 yakni pekerjaan pengecut! © buka-rahasia.blogspot.com