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. Main Remi Bersama Top Komentator
  2. Membuat Efek Text Stroke Dengan CSS
  3. Mempercantik Tampilan Code Snippets Dengan CSS
  4. Membuat Menu Navigasi Dengan CSS3
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Custom CSS Per Post
  7. Bypass Template Path dan Stylesheet Path
  8. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  9. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  10. Membuat Text Gradient Dengan CSS
  1. 27-6-2011 at 02:16 | #1

    Wah manteb nih mas… kalau polanya berupa vintage gitu bisa gak mas? Ada efek seperti pasir halus itu…
    ============================
    belum dicoba Mas Dhany waktunya sempit banget ntar kapan2 jika sudah longgar waktunya

    Reply

  2. 27-6-2011 at 10:08 | #2

    maaf OOT Pak Alwi..
    mau nanya, kenapa hosting saya selalu penuh ya? apa ada kesaLahan setting w3 Total Cache?

    ————————————————————————
    Setting expired cachenya mungkin apa terlalu lama? atau kadang ada trouble di server, dulu saya pernah mengalami waktu pakai widget cache, cachenya gak bisa terhapus secara otomatis sehingga disk space cepat penuh, dihapus manual juga gak bisa karena terprotek oleh server, setelah minta admin hosting untuk merubah hak previlage bisa normal kembali

    Reply

  3. 27-6-2011 at 10:46 | #3

    Cuma kasih kode ga di terangin bagaimana itu bisa terbentuk?
    darimana gradient berjalan dan berakhir?

    Pertanyaan gua ada ga pengaruh grid dan coordinate di CSS3 gradient?
    kl ada di mana pengaruhnya?

    ———————————————————————————————
    Waktunya sempit banget, ni langsung praktek dan contohnya dulu

    Reply

    indam Reply:

    Hendro,
    mungkin kang alwi lagi ngga ada waktu, makanya ngga dijelasin.

    Reply

  4. 28-6-2011 at 08:06 | #4

    riweuh mas…..perlu belajar lagi bagi saya,
    btw PR m-alwi.com turun yak, senasib nih kita

    Reply

    Hari Mulya Reply:

    ternyata dah update ya Mas?
    aku baru tahu..
    tapi m-alwi.com Alexa Rank nya ttep megang, hehehe

    Reply

    Hari Mulya Reply:

    barusan ikutan ngecek..
    aLhamdulillah, harimulya.com maLah naek jadi PR4…

    Reply

  5. 28-6-2011 at 15:38 | #5

    terima kasih sudah dishare.. tapi cara pasangnya gemana ya.hehe
    oh ya barusan ane cek di W3. ternyata website sobat ini lulus validator ya.. boleh dong di bagi.. sekali lagi salam kenal

    Reply

  6. 30-6-2011 at 11:22 | #6

    thanks Your share Informations And Tutorial…
    greetings Good luck always

    Reply

  7. 30-6-2011 at 21:44 | #7

    ternyata css 3 lebih manteb ya daripada css 2

    Reply

  8. 1-7-2011 at 04:01 | #8

    Waduh, ngelmunya nggak nyandhak saya mas. Btw, PRnya kok mlorot jadi 2 mas? Tapi alexanya jan, ngeri 44.657.

    Reply

  9. 3-7-2011 at 02:05 | #9

    mantab gan artikelnya..
    boleh di coba ni…hehehe

    Reply

  10. 7-7-2011 at 15:17 | #10

    keren mas!
    tapi belum ada yg cocok sama bentuknya..
    di tunggu koleksi pattern berikutnya.. :)

    Reply

Comment pages
5+8=? (Wajib diisi)