Membuat Warna Berbeda Pada Text Selection Bagian Teks yang diBlok

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

Untuk meng-hack browser serta melakukan override fungsi tersebut pada blog/website ketika ini sangatlah memungkinkan. Kehadiran CSS3 sudah banyak memberikan perkembangan serta perubahan dalam dunia desain web. Untuk membuat output misalnya di atas, digunakan selector ::selection. Tipe ini didukung oleh semua browser kecuali Internet Explorer. Untuk Mozilla Firefox perlu ditambahkan -moz- sebagai notifikasi supaya dikenali sang browser tadi:
selection::color:#ff0000;
::-moz-selectioncolor:#ff0000;
untuk memberikan pre-selection (pre selection merupakan rona selesainya anda memblok suatu bagian text, kemudian anda klik/pindah ke bagian lain di personal komputer anda pada luar browser. Misalnya sehabis memblok bagian text pada posting ini, silahkan klik area kosong pada 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, buat membuatnya secara lengkap serta melakukan generalisasi, tambahkan script ini dia sebelum/di atas (use Ctrl+F) di editor HTML anda:

::selection background:#cc0000;color:#ffffff;
::-moz-selectionbackground:#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;
Ganti kode warna background serta color sesuai menggunakan kesukaan anda. Lihat kode-kode rona di Hex Color Code Chart Generator. Gunakan mix warna yang proporsional dan kontrastif dalam ::selection dan ::-moz-selection. Kemudian simpan dan coba hasilnya.
mencuri merupakan pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Membuat Warna Berbeda Pada Text Selection Bagian Teks yang diBlok"