Membagi Latar Belakang Warna Mudah Menggunakan Gradien CSS

Jika Anda ingin menambahkan latar belakang warna terpisah ke situs web Anda, ada cara mudah untuk melakukannya dengan CSS. Ini didukung dengan cukup baik, dan menghasilkan efek yang sangat unik. Anda dapat menambahkan bagian warna sebanyak yang Anda inginkan, dan karena ada gradien, Anda dapat memilih apakah mereka bertransisi secara tiba-tiba, atau memudar satu sama lain. Pertama, berikut adalah contoh efek yang akan kita buat.

Lihat Pena
Split Color Responsive BG oleh Yakobus (@Isotropik) pada pena kode.

Dalam demo ini, Anda dapat melihat bahwa 1/2 layar berwarna ungu, dan 1/2 layar berwarna putih. Namun, kita dapat menambahkan warna sebanyak yang kita inginkan. Kita juga dapat mengubah rotasi tempat pemisahan warna, sehingga bisa berupa transisi vertikal, horizontal, atau miring.

Bagian terbaiknya adalah, kita bahkan tidak perlu menulis CSS, atau bahkan memahami cara kerjanya, karena kita akan menggunakan alat generator gradien gratis yang merupakan pokok dari bookmark situs web desain web kita.

Untuk membuat efek ini, mari kita bicara tentang cara kerjanya secara teknis, lalu tunjukkan cara membuatnya sendiri. Secara teknis, kami menggunakan gradien latar belakang CSS, yang didukung di sebagian besar browser utama. Alat yang kami gunakan bahkan akan menambahkan dukungan untuk Internet Explorer 6 dan lebih tinggi, yang tidak pernah terdengar di tahun 2021.

Gradien CSS ini diatur untuk mengubah warnanya tanpa ada jarak di antara keduanya, yang berarti pada intinya tidak ada pudar dari satu periode ke periode lainnya, ini membuat gradien menjadi blok warna, yang mengarah ke efek yang Anda lihat di atas. Ini adalah opsi yang bagus jika Anda memiliki konten yang disetel menjadi lebar halaman tertentu, tetapi Anda ingin latar belakang Anda diperluas ke lebar penuh layar. Misalnya, jika Anda memiliki gradien 50/50, itu akan meluas dari satu ujung layar ke ujung lainnya, sementara konten Anda di dalamnya akan tetap berada pada titik henti sementara maksimum Anda mungkin 1200 piksel.

latar belakang: rgb(255.255.255); latar belakang: -moz-linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(131,0,254,1) 50%); latar belakang: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(131,0,254,1) 50%); latar belakang: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(131,0,254,1) 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#ffffff”,endColorstr=”#8300fe”,GradientType=1);

Sekarang, ini adalah copy paste dari kode CSS yang akan digunakan untuk menambahkan efek ini. Anda dapat menggunakan ini pada bagian atau div, cukup terapkan melalui ID atau kelas.

Anda mungkin berpikir, ini sangat menyakitkan untuk ditulis, saya mungkin melewatkan efek ini dan menggunakan latar belakang yang solid. Untungnya, ada cara mudah untuk menghasilkan gradien untuk membuat warna latar belakang terpisah di situs web apa pun, didukung di hampir semua browser tempat pengunjung Anda berada.

Untuk membuat latar belakang gradien Anda yang menghasilkan warna terpisah, cukup atur pemberhentian agar sama satu sama lain. Jadi dalam contoh ini, untuk latar belakang split 50/50, kedua stop berada di 50%.

Jika kita menginginkan tiga warna dengan jarak yang sama untuk latar belakang kita, kita cukup berhenti di 33% dan mereka berhenti di 66%. Satu warna akan berkisar dari nol hingga 33, yang lain akan berubah dari 33 menjadi 66, dan yang berikutnya akan berubah dari 66 menjadi 100.

Anda juga dapat memanipulasi rotasi efek ini untuk menjadikannya vertikal, horizontal, atau apa pun di antaranya. Hal utama yang perlu diperhatikan di sini adalah Anda hanya berhenti pada nilai yang sama. Jika nilainya berbeda, maka warnanya akan memudar satu sama lain, itulah yang dimaksudkan untuk dilakukan oleh gradien CSS.

Setelah Anda selesai membuat gradien, cukup salin dari antarmuka pengguna, tempelkan ke lembar gaya situs web Anda, dan tetapkan ke div atau bagian tertentu menggunakan ID atau kelas.