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

CSS3 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

CSS3 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

CSS3 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

CSS3 Gambar 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 : http://lea.verou.me/css3patterns/

Semoga bermanfaat dan selamat mencoba

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Apa css sprite dan bagaimana membuatnya
    CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.

Kiriman terbaru