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

text selection color
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! © buka-rahasia.blogspot.com

Membuat Warna Berbeda Pada Text Selection (Bagian Teks yang di-Blok)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 6 Comment(s):

bieun said...

wah postnya bermanfaat banget. jadi malu ane nih. hahaha

Ahmad Khoirul Azmee said...

@bieun Malu kenapa, Sobat? Oh ini blog yang pernah saya 'sapa' dulu ya? ^_^

Blog Cheat NS by Tio said...

gmna nih cara
ganti warna block select
tapi yg kata"nya di quote ??

solusi ada gak ?? :D

dharla ferdana said...

thank infonya gan, sangat bermanfaat. Ijin nyoba ya gan.!

Terlambat said...

Waaah, kereen neh tipsnya,,

cuman masih bingung aku,,

yAhyA riDwAn said...

ok, nih.. keren. aq dah pasang. thanks ya.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap