Membuat Background motif unik dengan CSS3

Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.

Motif Gambar Hati

background: 
   radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
   radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
   radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
   radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
 radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),
 
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
   radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
   radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
   radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
   radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
   background-color:#b03;
   background-size:100px 100px;

Motif Gambar Bintang

background:
   linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
 linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,

linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
   linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
   background-color: #232927;
   background-size: 100px 100px;

Motif Gambar Papan catur

background-color: #eee;
   background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
   linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
 background-size:60px 60px;

Motif Batu Bata

background-color: silver;
   background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
   linear-gradient(155deg, #d00 23px, transparent 23px),
   linear-gradient(335deg, #b00 23px, transparent 23px),
   linear-gradient(155deg, #d00 23px, transparent 23px);
   background-size: 58px 58px; 
 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

Cara menggunakan

Perintah css3 diatas dapat anda gunakan dengan mudah dan bisa diterapkan sebagai gambar latar/background sebuah area atau latar halaman. Anda tinggal sisipkan pada bagian css yang sudah ada. Misal :

Cara Menerapkan css3 untuk background halaman :

body 
{
background:
   linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
 linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,</pre>

linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
   linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
   background-color: #232927;
   background-size: 100px 100px;
}

Cara menerapkan css3 untuk background div/p : <div id="kotak:>...</div> / <p id="kotak">..</p>

#kotak 
{
background:
   linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
 linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,</pre>

linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
   linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
   linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
   linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
   linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
   linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
   background-color: #232927;
   background-size: 100px 100px;
}

Silahkan lihat demo membuat motif background bintang.

Untuk motif lainya, silahkan kunjungi situs sumber motif gambar css3 berikut : https://lea.verou.me/css3patterns/

Semoga bermanfaat dan selamat mencoba

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **