Kali ini saya akan membagikan Tutorial Mengganti Warna Background Selection Pada Text Link Image Dan Judul Blog .
Mungkin tutorial ini sudah banyak blogger jumpai di berbagai situs blog yang membahas tentang tutorial bloggers 🙂 tapi kali ini saya +Febri Tri Harmoko mencoba untuk memberikan tutorial yang berbeda dari semua nya 🙂
Untuk Contoh / Demo nya bisa lihat di bawah ini yah
Pada contoh di atas kita hanya menggunakan ::selectionuntuk Semua jenis Text yang ada dalam satu post trus bagaimana dengan background selection untuk judul , Text Link, Image, dan lain lain 🙂
Untuk Mengganti Background Selection pada Element lain kalian cukup menambahkan CSS element yang ingin di rubah warna backrgound Selection nya 🙂
kita ambil contoh untuk background Selection hanya pada paragraph saja.
Element untuk paragaraph dalam HTML itu di singkat dengan tag <p>jadi untuk penulisan CSS nya bisa lihat di bawah ini :
Penulisan Kode CSS untuk Text Link tambahkan huruf a di depan ::selection. Lihat Demo nya di bawah ini.
Untuk Mengganti warna background Selection ini kamu bisa mengganti format style nya tidak hanya warna background dan warna font saja. kamu juga bisa menambahkan efek text-shadow, font-style, Font-family, dan lain-lain nya.
Selain dari contoh penggantian warna ::Selection di atas kita juga bisa gunakan untuk element gambar / <img> untuk lebih jelas nya bisa lihat contoh lengkap nya di bawah ini .
untuk Code nya bisa kamu gunakan CSS di bawah ini, dan letakan di atas </style> / ]]></b:skin>.
/* LINK */
::-moz-selection { color: gold; background: purple; }
::selection { color: gold; background: purple; }
/* LINK */
a::-moz-selection { color: white; background: red; }
a::selection { color: white; background: red; }
/* Bold*/
b::-moz-selection { color: green; background: pink; }
b::selection { color: green; background: pink; }
/* paragraph*/
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
Udah dulu ya artikel tentang Tutorial Mengganti Warna Background Selection Pada Text Link Image Dan Judul Blog 😀 sisanya kamu bisa berkreasi sendiri dengan CSS ini 🙂
Pelajari lagi dan terapkan di blog kamu. kalau misal masih bingun dan ada pertanyaan bisa kamu tulis di komentar, Semoga bermanfaat.
