Cara Mengubah Warna Secara Dinamis Saat Menggulir Dengan CSS
Table of content:
Dengan elemen situs web stasioner seperti logo, Anda akan sering mengalami perpaduan warna saat menggulir halaman. Hal ini dapat terjadi jika elemen statis melewati bagian situs web yang memiliki warna yang sama dengan elemen tersebut. Elemen statis tidak akan terlihat saat berada di latar belakang itu.
Untuk memperbaiki masalah ini, Anda perlu membalikkan warna logo secara dinamis saat melewati elemen dengan warna yang sama. Pelajari cara mencapai efek ini hanya dengan menggunakan CSS, tanpa memerlukan JavaScript!
Unduh Kode Pemula
Untuk mengikuti tutorial ini, unduh kode awal dari file repositori GitHub ke mesin lokal Anda.
Baca Juga:
Membuka index.html di browser yang akan terlihat seperti halaman yang ditampilkan di sini:
Halaman HTML berisi logo dan empat bagian. Setiap bagian memiliki judul tiruan dan tiga paragraf teks tiruan. Teks logo memiliki warna hitam yang sama dengan latar belakang bagian kedua dan keempat. Efek ini berasal dari anak ke-n (genap) memblokir style.cssyang menerapkan latar belakang hitam ke bagian genap.
Membuat Logo Lengket
Dengan kode awal ini, logo tidak menempel di atas. Ini berarti logo menghilang saat Anda menggulir ke bawah halaman. Anda dapat mengubah logo Anda menjadi tajuk lengket dengan menerapkan posisi: lengket properti untuk itu di dalam file CSS. Untuk mendalami pemosisian dalam CSS, baca postingan kami di properti posisi CSS.
Pastikan logo menempel di bagian atas, tetapi lakukan hanya di layar yang lebih besar (karena, pada ukuran layar yang lebih kecil, logo dapat menutupi elemen lain). Kueri media responsif HTML berikut membuat efek ini:
@media(width > 980px) {
.logo {
position: sticky;
top: .5rem;
}
}
Sekarang logo akan menempel di bagian atas setiap saat dan mengikuti Anda saat Anda menggulir. Tetapi Anda juga akan melihat bahwa teks menghilang saat Anda menggulir ke bagian latar belakang yang gelap (karena teks logo juga berwarna hitam). Sekarang lihat cara memperbaikinya.
Untuk memastikan bahwa logo hitam tidak hilang pada latar belakang hitam, Anda perlu membalikkan warna secara dinamis. Cara Anda melakukannya adalah dengan menggunakan mix-blend-mode properti CSS dan memberinya nilai perbedaan:
@media(width > 980px) {
.logo {
position: sticky;
top: .5rem;
mix-blend-mode: difference
}
}
Properti CSS mix-blend-mode menentukan bagaimana konten elemen harus berbaur dengan konten induk elemen dan latar belakangnya. Nilai yang berbeda mengambil nilai perbedaan dari setiap piksel, membalikkan warna terang. Jadi jika nilai warnanya sama, warnanya menjadi hitam. Perbedaan nilai akan terbalik.
Penambahan CSS di atas akan membuat logo hilang sama sekali. Ini karena Anda belum menyetel warna teks logo menjadi putih di luar kueri media. Lakukan itu dengan kode berikut:
.logo {
color: white;
}
Sekarang Anda telah berhasil mengatur semuanya. Gulir ke bawah halaman dan masuk ke latar belakang hitam. Anda akan melihat logo berubah dari hitam menjadi putih.
Anda juga dapat bekerja dengan warna lain selain hitam dan putih. Misalnya, jika Anda mengubah warna teks logo menjadi warna teal (#008080), Anda akan mendapatkan warna merah muda pada latar belakang putih. Gambar berikut mengilustrasikan hal ini.
Dalam kebanyakan kasus, Anda ingin elemen Anda berwarna putih untuk mendapatkan hasil terbaik. Juga, jika Anda menggulir ke atas, Anda mungkin menemukan logo Anda terpotong menjadi dua. Ini terjadi karena logo ada di luar
Menggunakan Gambar sebagai Logo Alih-alih Teks
Teknik ini tidak hanya bekerja dengan teks, tetapi juga dengan gambar. Tentu saja, Anda perlu memastikan bahwa Anda menggunakan gambar putih sebagai logonya. Contoh berikut menggunakan logo lorem ipsum putih yang ada di folder yang sama dengan index.html mengajukan:
<img src="loremipsum-297.svg" alt="Lorem Ipsum Logo">
Gambar yang digunakan di sini adalah SVG (Scalable Vector Graphic), sejenis file vektor.
Sekarang warna gambar logo Anda akan menjadi hitam dengan latar belakang putih seperti yang ditunjukkan pada gambar di bawah ini.
Namun jika Anda menggulir ke latar belakang hitam, warna logo otomatis akan menjadi putih. Anda dapat melihat ini pada gambar di bawah ini.
Anda juga dapat memperbesar ukuran logo dengan mengganti ukuran huruf dengan tinggi Dan lebar di blok CSS yang menargetkan logo. Lagi pula, Anda sekarang berurusan dengan gambar daripada teks.
.logo {
color: white;
width: 10rem;
}
Jika Anda mengecilkan layar, kueri media tidak akan diterapkan lagi. Ini akan mematikan mode campuran yang berbeda, membuat logo Anda menghilang. Untuk mengembalikan logo ke halaman, Anda perlu menyetel mix-blend-mode Properti pada logo di luar kueri media:
.logo {
color: white;
width: 10rem;
mix-blend-mode: difference;
}
Ini akan mengaktifkan pencampuran campuran pada logo setiap saat, bahkan pada layar yang lebih besar. Namun pada layar kecil, logo akan tetap berada di atas dan tidak mengikuti Anda saat Anda menggulir ke bawah (karena posisi: lengket bekerja pada layar besar saja). Terakhir, selalu ingat untuk menggunakan logo putih agar tidak menghilang dari halaman.
Pelajari Lebih Lanjut Tip dan Trik CSS
Dengan menggunakan mode mix-blend, Anda dapat membuat tata letak yang menarik dengan warna bergantian. Lebih baik lagi, Anda tidak perlu mengkodekan warna apa pun atau menyetel breakpoint karena mode mix-blend akan membalikkan warna secara dinamis. Ini memungkinkan Anda membuat campuran dan warna yang bagus untuk bagian konten elemen tergantung pada latar belakang langsungnya.
CSS sering dianggap sebagai salah satu bahasa yang paling menarik untuk dipelajari. Ini sebagian karena CSS penuh dengan tip dan trik seperti yang baru saja Anda pelajari di artikel ini. Beberapa tip dan trik CSS berguna lainnya adalah efek hover, mengubah ukuran gambar agar sesuai dengan wadah, memotong teks dengan elips, dan menggunakan transformasi teks.
Artikel Terkait
