Tutorial Membuat Background Bermotif Dengan Repeating Linear dan Radial Gradient

Halo Sobat, Dikesempatan kali ini Saya mencoba menuliskan tutorial membuat background bermotif pure atau murni CSS, dengan menggunakan CSS Repeating Linear & Radial Gradient. 

Setelah pada postingan sebelumnya membahas tentang "Memahami Properti CSS Background" disini Saya masih membahas seputar background tetapi di pembahasan yang lebih mendalam tentunya.

Sebelum nya sediakan terlebih dahulu tool yang biasa Anda gunakan untuk mengedit web atau gunakan tool HTML & CSS Editor blog ini.

Menggunakan background repeating gradient berfungsi untuk menampilkan warna background secara berulang-ulang mengikuti ukuran  warna yang ada sampai ukuran maksimal dari background atau elemen nya.

Repeating Linear Gradient

Yaitu pengulangan warna gradient secara garis lurus.

Membuat motif zebra cross

• Copy / salin kode HTML ini :  

<div class="bg"></div><!--Menggunakan elemen untuk contoh background dengan class selector "bg"-->

• Kemudian kode CSS ini :

.bg{
width: 300px;/* Lebar dari elemen bg */
height: 250px;/* Tinggi dari elemen bg */
background: repeating-linear-gradient(
black, 
black 25px, 
transparent 25px, 
transparent 50px
)}

• Pada Kode CSS black yang pertama adalah untuk mendeklarasikan warna yang pertama dibuat.
• Kemudian diikuti oleh kode black 25px, yaitu ukuran dari warna pertama tersebut 25px.
• Kode transparent 25px, yaitu sebagai warna penghubung setelah warna black ke warna selanjutnya (Warna penghubung menggunakan warna yang sama seperti warna selanjutnya).
• Jika tidak menggunakan warna penghubung, maka perpindahan warna tidak rapi atau blur(Memudar).
• Gunakan nilai yang sama besar atau lebih kecil dari warna sebelumnya, jika lebih besar akan menampilkan efek blur setelah warna sebelumnya (Silahkan dicoba).
• Kode transparent 50px, adalah warna setelah warna black dengan ukuran warna yang ditampilkan 25px, tetapi dituliskan 50px karena warna sebelumnya yaitu black, menggunakan ukuran 25px (Jadi 25 + 25 = 50). 
• Linear-gradient atau repeating-linear-gradient menampilkan warna dari atas kebawah, pada contoh dari hitam ke transparan, karena secara defaultnya menggunakan (To Bottom).

Membuat motif kotak-kotak diagonal

• Ganti kode CSS sebelumnya dengan kode ini

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
)}

• Maka tampilannya kurang lebih seperti ini.

• Selanjutnya kita tambahkan satu repeating linear gradient lagi untuk membuat background menjadi kotak-kotak. Salin dan gantikan kode CSS sebelumnya dengan kode ini.

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
),repeating-linear-gradient(
to left,
#abf, 
#abf 25px,
transparent 25px, transparent 50px
);
}

• Untuk menambahkan repeating-linear-gradient lagi pada background gunakan "," koma setelah ")" tutup kurung gradient sebelumnya.
• Pada gradient ke-2 kode diatas ada kode to left, yang berarti warna dideklarasikan dari kanan ke kiri. Klik link Gambar ini untuk melihat tampilannya.
• Pada output diatas, kita melihat background gradient ke-2 dimulai dari sebelah kanan ke kiri, karena menggunakan kode to left tadi.
• Kita lihat juga pada output, warna biru menimpa warna ungu, untuk menggabungkan kedua warna tersebut, tambahkan kode CSS background-blend-mode: multiply; sebelum kode penutup CSS "}" tutup kurung kurawal. Maka tampilan background berubah menjadi seperti ini. Klik link Gambar ini untuk melihat tampilannya.
• Nah untuk menjadikan background sesuai judul contoh, membuat kotak-kotak diagonal, maka ganti saja semua kode CSS sebelumnya dengan ini agar lebih mudah. 

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(45deg,
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
),repeating-linear-gradient(
-45deg,
#abf, 
#abf 25px,
transparent 25px, transparent 50px
);
background-blend-mode: multiply;
}

• Kode yang ditambahkan pada CSS diatas adalah 45deg pada gradient pertama, yang artinya, gradient diputar 45 derajat, -45deg pada gradient kedua, yaitu diputar minus 45 derajat. Maka tampilannya seperti Gambar ini. 

Repeating Radial Gradient

Yaitu pengulangan gradient berbentuk lingkaran. Langsung saja berikut ini sample / contoh dari repeating radial gradient, atau background bermotif lingkaran-lingkaran.

• Kode HTML masih menggunakan yang lama saja.
• Ganti Kode CSS yang lama dengan yang ini.

.bg{
width: 250px; height: 250px;
background:repeating-radial-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 10px,
white 10px,
white 14px,
#6cf 14px,
#6cf 17px,
transparent 17px,
transparent 25px
);

background-size: 50px 50px;
}

• Pada CSS diatas, background-size; 50px 50px berarti setiap lingkaran berukuran lebar dan tinggi 50px. Dan lingkaran akan diulang-ulang juga hingga memenuhi lebar maksimal elemen. Tampilan dari repeating radial gradient contoh ini adalah seperti Gambar berikut.

Gunakan kreatifitas Sobat sekalian untuk membuat background lebih bervariasi atau lebih menarik, bahkan bisa membuat motif batik barangkali. Silahkan di otak atik kode tersebut agar lebih memahami CSS nya.

Nah, Saya kira cukup sekian pada tutorial kali ini, semoga ini dapat bermanfaat bagi Sobat sekalian yang mungkin belum tahu sebelumnya cara membuat background bermotif dengan CSS murni. Mohon maaf bila ada kesalahan pengertian atau kata-kata pada artikel ini. Terima Kasih.