Home » CSS » Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient

Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient

26 Jun. 201118 comments
Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient

Di postingan sebelumnya pernah saya sampaikan kalau browser Opera terbaru (versi 11.11) saat ini sudah mendukung CSS3 Linear Gradient dengan berbagai variasinya seperti Transparent Gradient, Multiple colour Gradient dan Repeating Gradient. Kali ini saya akan sharing tentang teknik repeating gradient dengan variasi lainnya yaitu membuat background pattern dengan CSS3 repeating linear gradient. Arah atau pola dari linear gradient bisa dibuat secara diagonal, vertikal, horizontal atau gabungan diagonal, vertikal dan horizontal gradient.

Berhubung waktunya pendek, karena besok pagi harus kembali ke Jakarta setelah ada acara keluarga di Jogjakarta sekaligus menyempatkan ikut acara kopdar dengan Komunitas Blogger Jogja, liputannya ada di sini, untuk contoh kali ini mungkin hanya 3 dulu, lain waktu akan saya berikan contoh yang lebih banyak lagi.

Yuk langsung praktek :
1. Diagonal dan Horizontal

Kode CSS-nya :

#diagonalhorizontal-gradient {
  height: 150px;
  margin: 0 3px 20px 0;
  background-color: #eaeaea;
  background-size: 25px 20px;
  background-image:
     -webkit-repeating-linear-gradient(90deg, rgba(255, 105, 180, .1), rgba(255, 105, 180, .1) 1px, transparent 1px, transparent 25px),
     -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -moz-repeating-linear-gradient(90deg, rgba(255, 105, 180, .1), rgba(255, 105, 180, .1) 1px, transparent 1px, transparent 25px),
     -moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -o-repeating-linear-gradient(90deg, rgba(255, 105, 180, .1), rgba(255, 105, 180, .1) 1px, transparent 1px, transparent 25px),
     -o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     repeating-linear-gradient(90deg, rgba(255, 105, 180, .1), rgba(255, 105, 180, .1) 1px, transparent 1px, transparent 15px),
  background-image:
     repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);

border-top:10 px solid grey;box-shadow:4px 5px 4px #999;-moz-box-shadow:4px 5px 4px #999;-webkit-box-shadow:0 5px 4px #999;
}

2. Cross Diagonal

Kode CSS-nya :

#crossdiagonal-gradient {
  height: 150px;
  margin: 0 3px 20px 0;
  background-color: #eaeaea;
  background-size: 25px 20px;
  background-image:
     -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
border-top:10 px solid grey;box-shadow:4px 5px 4px #999;-moz-box-shadow:4px 5px 4px #999;-webkit-box-shadow:0 5px 4px #999;
}

3. Vertical dan Horizontal

Kode CSS-nya :

#verticalhorizontal-gradient {
  height: 200px;
  margin: 20px 4px 10px 0;
  background-color: #eaeaea;
  background-size: 25px 25px;
  background-image:
     -webkit-repeating-linear-gradient(90deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 2px, transparent 1px, transparent 15px),
     -webkit-repeating-linear-gradient(180deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 2px, transparent 1px, transparent 15px);
  background-image:
     -moz-repeating-linear-gradient(90deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -moz-repeating-linear-gradient(180deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -o-repeating-linear-gradient(90deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -o-repeating-linear-gradient(180deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     repeating-linear-gradient(90deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     repeating-linear-gradient(180deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
border:1px solid #9C9C9C;box-shadow:4px 5px 4px #999;-moz-box-shadow:4px 5px 4px #999;-webkit-box-shadow:4px 5px 4px #999;
}

Support browser, Mozilla Firefox 4, 5, Opera 11.11 dan Chrome 12.0.742.100

Mudah-mudahan artikel tentang Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  2. Menggulingkan Top Komentator
  3. CSS3 Animation, Zoom In Zoom Out, Rotation
  4. CSS3, Sonic Mengejar Bola
  5. Membuat Text Gradient Dengan CSS
  6. Modifikasi Tampilan Halaman Daftar Isi
  7. Cara Mencegah Copy Paste Dengan CSS
  8. CSS Image Sprites Generator
  9. Source Code Main Remi Bersama Top Komentator
  10. Customisasi Tampilan Tag Cloud
  1. 13-7-2011 at 15:29 | #1

    besides bergari-line, there is not so bumpy sperti seen running?

    Reply

  2. 15-7-2011 at 12:41 | #2

    info yang menarik..tampilan blog nya bagus bgt pak.
    btw link pak alwi sudah saya tampilkan pada blog saya, di linkback ya pak..tq

    Reply

  3. 18-7-2011 at 10:19 | #3

    Kalau ngasih background pake gambar biasa gmn tapi menggunakan CSS ?
    ———————————————————————————————————
    Bisa dibaca di postingan ini : Cara Mengganti Background Theme WordPress

    Reply

  4. 24-8-2011 at 10:48 | #4

    susah yah kalo begini harus cari designer

    Reply

  5. 23-6-2012 at 12:29 | #5

    mas source untu contoh lebih banyaknya dimana ya kalo boleh tau?

    Reply

Comment pages
2+4=? (Wajib diisi)