Membalikkan warna teks ke warna latar belakang

Assalamualiqum.wr.wb...




Pada kesempatan kali ini saya akan mencoba Untuk membuat sebuah teks yang di mana teks tersebut mengikuti sebuah warna background,

Jadi begini teks hitam akan berlatar belakan putih dan teks putih akan berlatar belakang hitam seperti DEMO dibawah ini

Ini adalah demo cara membuat CSS Text Color Invert (Membalikkan warna teks ke warna latar belakang) Sangat unik

Ini biasa di sebut CSS Text Color Invert (Membalikkan warna teks ke warna latar belakang)

Saya mendapatkan inspirasi ini dari sebuah majalah, beberapa hari yang lalu maka saya akan mencoba mempublikasikan di sini, Untuk membuatnya tidaklah sulit karna disini saya memakai dua class seperti yang kalian lihat css di bawah,

yang pertama kalian masuk ke mode edit HTML pada template blog kalian lalu tempelkan css di bawah ini tepat di atas ]]></b:skin>

/* Cenggini sarang */

* {
  box-sizing: border-box;
}

.webcensar {
 overflow: hidden;
 height: auto;
  padding: 10vmin;
 background: linear-gradient(to right, #fff 0%, #fff 50%, #222 50%, #222 100%);
}

.cs {
 height: inherit;
 background: inherit;
 -webkit-background-clip: text;
     background-clip: text;
 color: transparent;
 font: 100 4.5vmin/5vh helvetica;
 text-align: absolute;
 filter: invert(1) grayscale(1) contrast(10);
}

Penjelasan css
class yang saya beri nama cs itu adalah bagian ke dua dari class pertama webcensar maka class kedua berperan sebagai cucu karna class cs sepenuh nya mengikuti atau atau dalam silsilah keluarga bisa di sebut mewarisi dari class pertama,

Selanjutnya jika kalian ingin menulis artikel kalian Gunakan cara di bawah ini ✔ Selesai!

<div class="webcensar">
<div class="cs">Teks kalian di sini </div></div>

Penjelasan HTML
Lebih detail saya jelaskan class pertama bertujuan untuk membaca class kedua dan class kedua punya peran penting untuk membaca keseluruhan karna yang telah saya sebutkan di atas bahwa class pertama telah mewarisinya ke pada class ke dua,

Udah itu saja artikel kali ini
Semoga bermanfaat

Baca juga