You must enable Javascript in your browser to run or open this site.

Collection CSS3 Background Patterns

Setelah Saya posting tentang Koleksi Script Vbs & Bat / Script to destroy Computer. Ane punya Koleksi lagi nih untuk di jadikan tambahan koleksi sobat di rumah. Koleksi apa sih? Ya, koleksi CSS3 Background / Patterns. Apasih yang di sebut dengan Patterns?Menurut Pribadi saya Patterns dalam dunia web design adalah motif suatu latar belakang/background dan biasanya motif tersebut berbeda beda warna, bentuk, dan style. Biasanya Patterns identik dengan Repeat (pengulangan gambar secara infinite dengan CSS background-repeat) agar motif terlihat banyak.

Patterns yang dalam bentuk Gambar bisa diambil di website terkenal www.squidfingers.com atau bgpatterns.com. Contoh Patterns yang di hasilkan oleh gambar menggunakan background-repeat:repeat-y atau background-repeat:repeat-y ataupun keduanya background:repeat;

padding:10px; background: url(http://www.squidfingers.com/file/patterns/pattern_148.gif) repeat; width:50%; border:1px solid #fff; box-shadow:inset 0 0 5px #ccc, 0 0 3px #ccc;
Kode url background yang seharusnya aslinya kecil, ketika diulang terlihat besar dan banyak. Pengulangan gambar di bantu dengan kode css repeat itu. Kode Repeat bisa diatur menjadi Mengulang Horizontal maupun Vertical. Bisa di lihat Gambar kode Repeat Horizontal dan Vertical dalam Css.

Dari keterangan Gambar itu bisa di sebutkan kalau :

1. Kode Repeatyang di tambahkan y berarti kode tersebut mengulang ke bawah atas/Vertical
2. Kode Repeatyang di tambahkan x berarti kode tersebut mengulang ke kanan kiri/Horizontal.

Patterns dalam bentuk CSS3 mungkin akan terlihat unik dan beraneka ragam bentuk Backgroundnya. Begini, motif background mungkin akan terbentuk bagus tetapi itu bukan merupakan suatu Gambar png, gif, jpg, jpeg, bmp, dan lain lain. Melainkan suatu motif yang benar benar menyatu dengan web.

padding:10px; background-color:#ffcc00; width:50%; border:1px solid #fff; box-shadow:inset 0 0 5px #ccc, 0 0 3px #ccc;
Contoh kecilnya body{background-color:#ffcc00;} seperti background warna yang aslinya BUKAN GAMBAR. Dalam kata lain warna kuning pada box di samping adalah bukan di kategorikan sebagai gambar, melainkan hanya warna.

Berikut adalah contoh background patterns dengan karya CSS3 beserta KODE CSS3 PATTERNS-nya



Kalau sobat tidak bisa melihat Background Patterns Css3 diatas, kemungkinan besar browser sobat tidak Support dengan CSS3 Gradient ini. Suport Browser: Firefox 3.6+, Safari, Chrome. Lagi lagi IE tidak bisa kan? Nah saya sarankan untuk menggunakan Browser terkenal saat ini dan sering sering Update browser sobat untuk browser bisa mengenali script script baru atau css baru.

Berikut cara membuat kotakan seperti itu.
  1. Buat kode <div></div>
  2. pada kode <div> tambahkan kode style="KODE CSS3 PATTERNS"
  3. Contohnya seperti ini :
    <div style="KODE CSS3 PATTERNS"></div>
    Kode bisa di salin dengan kode yang ada di box berwarna itu.
  4. Edit style box (box-shadow, text-shadow, padding, margin, dan lain lain) seperlunya dan SELESAI.
Bagaimana menurut sobat? indah bukan? silahkan jika menemukan kejanggalan, komen saja :)

127 comments

  1. ohiya ane mau ganti background buat blog ane nih, ada yg lain gak tuh, jgn yg cerah2,, =)) =)) nyari nya dimana..?

    BalasHapus
  2. iya nih... warnanya terang banget bro ... :D

    BalasHapus
  3. wah wah hebat hebat klow mw belajar ternyata css3 canggih juga ya gan hmmmjadi pengen tp pd males belajar nya he3...liat aj seneng ap lg klow bisa he3...

    BalasHapus
  4. To Rama : silahkan nikmati pertamax :Pudah ane tambah tambahin tuh :D
    To shinobi : udah di tambahin :))

    BalasHapus
  5. To bopfive5 : sebenernya biasa saja, tapi kalau di gabungkan menjadi indah :)) pasti bisa kok sob :)

    BalasHapus
  6. ini mantabb Sob...ringan banget dibandingkan bg image. Moga semua browser cepat update dan bisa menjalankan css3 dengan baik...Nice share and happy blogging!

    BalasHapus
  7. kren juga nih ane coba tar ah :))

    BalasHapus
  8. hmmm....
    sip dahh
    disini selalu update untuk optimasi blognya...
    btw.. klo backgroundnya gambar sendiri gimana caranya sob?

    BalasHapus
  9. wah keren-keren sob , ane pernah coba jadi berat loadnya :(

    BalasHapus
  10. background yg warna pink putih hitam biru(yg polos) kenapa banyak banget kodenya ? kan bisa pake kode warna rgba

    BalasHapus
  11. wew,, keren keren background dari CSS ini sobat...

    BalasHapus
  12. Ane juga seneng banget ngumpulin background pattern buat design blog.. thanks udah nambahin :D

    BalasHapus
  13. To Catatan ngeblog : hehehehe :) sip om kerenya :)
    To Iskaruji : hehehe iya browser sangat mendukung :)
    To Shinobi Caemk : wkwokwokw yadeh apa kata shinobi :))
    To BLOGCUNAYZ : halo kawan, lama gak ketemu :)) silahkan di coba
    To Setia Ji : iya om, namanya blog tutorial :)) upload gambar ke blogger → urlnya di kopas ke (cari kode body{ kan ada background: tambahin jadi background:url(URL GAMBAR.com); ) jadi deh :))
    To Mbah Qopet : background yang mana dulu nih. browser sobat mungkin kurang di update mungkin :)
    To Asis Sugianto : iya sob :D hehehehe cobain aja kalau perlu :)

    BalasHapus
  14. To Putra Tenzhung : wahhh ngoleksi juga ya? :D wahhh sama kalau begitu :)) okedeh :)

    BalasHapus
  15. Wuih, tutorialnya keren banget bro :D

    BalasHapus
  16. wah comment ane dhapus :((
    kode pattern selain d demo ad gk?

    BalasHapus
  17. sipppp neh,, lumayan wat koleksi kang

    BalasHapus
  18. Sungguh sob satu tip yang bagus dan menarik,ringan lagi untuk blog kita,namun ane cek di The W3C CSS Validation Service,error dan warning css ane jadi naik tajam.Apa ada yg salah ya dengan penerapannya,mohon pencerahan ya sob,makasih banyak infonya,happy blogging ajah.

    BalasHapus
  19. wah manteb neh .. bagus2 lagi demonya, ,

    BalasHapus
  20. To Pradisz Wardana : thanks banget bro :)
    To Cek Info : Comment yang mana? ane gak pernah hapus komentator. kalau hapus pasti ketawan bro disini 21 Comments, tapi pas di Home keliatan 22 Comments. Sumpah ane gak hapus, mungkin sobat lupa Comments. Ane Update Demo kok

    BalasHapus
  21. To topjer : iya kang :)
    To Er'end : mungkin memang CSS3 gradient linear tidak valid di w3validator
    To Bayu : hehehehe iya sob, namanya juga lagi koleksi :))

    BalasHapus
  22. seeepppp.... keren2 templatenya sob,, ijin copas scriptnya sob, sempat sewaktu2 dapat berguna sob...

    BalasHapus
  23. kapan bisa di terapkan di belog saya. wong saya rang deso gak ngerti gini gini'an!

    BalasHapus
  24. waaaa... demonya dipindahin ... :D

    BalasHapus
  25. Berkunjung gan.
    Pandai sekali kamu ini gan membuat tutor
    hebat gan

    BalasHapus
  26. Wah ada koleksi ilmu yang bagus dan jarang kudapat hehehe

    BalasHapus
  27. mntap bro dari dulu aku juga mau posting bg ini tapi gak jadi2 hehehe akhirnya di posting juga disiini sipp

    BalasHapus
  28. box-shadow bikin ngejreng..
    thanks inpo css3nya kawan :D

    BalasHapus
  29. To Asis Sugianto : thanks sob hihihi :) silahkan di copas script CSS3nya :))
    To Anonim : mang blog kamu apa bro?
    To Shinobi : biar gak terlalu rame ah disini :D lagi pula itu demo kan blog ane juga :P
    To Obat Sakit 2011 : hehehe namanya juga blog tutorial :P apa saja asalkan tutoial :P
    To anisayu : hehehehe lagi lagi koleksi kan? :D thanks mba kunjngannya
    To Zhinto : jiiaahahaha :D lebih cepat lebih baik sob :))
    To alkatro : ini bukan box-shadow kawand :)) tapi patterns :)) thanks ya kunjungannya

    BalasHapus
  30. ikut meramaikan ahhh,, =)) =)) =)) =))

    BalasHapus
  31. To Rama : oke sob meramaikan aja :)

    BalasHapus
  32. bagus sahabat css-nya....tak simpan dulu siapa tahu nanti membutuhkan seperti ini

    BalasHapus
  33. To Abu Farras : memang bagus sob, simpan saja untuk bekal sobat dirumah :))

    BalasHapus
  34. ya iyalah bro.. blog ente .. masa ente mau ngasih demo di blognya org lain .. :D :P

    BalasHapus
  35. Kalau berkunjung di sini pastinya sering disuguhi segala hala tentang CSS dan semunya bagus-bagus sobat...
    Lanjutkan

    BalasHapus
  36. To Shinobi : kan ada juga yang blog ngasih demo ke link orang lain :D huahaha :))
    To cardiacku : oke saya lanjutkan :) thanks banget ya kunjungannya

    BalasHapus
  37. wah ternyata kamu jago main css ya gan ,, ajarin donk,semua post kamu pasti css lagi,,ckkcc

    BalasHapus
  38. Pena hadir dan absen sore gan...keren nih postingannya sobat..perlu untuk dicoba nih sekali-kali nantinya

    BalasHapus
  39. hehe.. ie memang payah tuh... tapi kok visitor amerika selalu gunain ie ya??? mang bikin bingung aja tu orang2 luar

    BalasHapus
  40. Keren dan bagus koleksinya sahabat...

    BalasHapus
  41. memang kreatif agan yg satu ini,, ajarin ane dong gan :D

    BalasHapus
  42. ok ..
    makasih keterangannya sob...
    btw ane punya postingan baru nih sob..
    di earth-inside

    BalasHapus
  43. To Anisayu : hehehe silahkan di baca caba koleksinya :))
    To Thepoen : gak juga :)) gak lahhhh!! kan bisa dilihat :P sekarang lagi enak aja setting CSS :))
    To tautanpena : silahkan diadiri ini :)) thanks gan silahkan di coba cobi :)
    To Musa : iya sob sama kayak orangnya keren :)) ngarep banget ane =))
    To pri crimbun : sobat kok tau? ane juga ya kalau orang luar menggunakan IE padahal payahnya bukan main. :|

    BalasHapus
  44. To ibnu siswoyo : thanks gan supportnya :)
    To Liandri : hehehe namanya juga koleksi ya harus gitu :)
    To Aldio : ajarin gimana sobat :)) kalau punya waktu sih bisa bisa aja :D
    To Setia Ji (earth inside) : saya mau datang ke TKP :)

    BalasHapus
  45. ohh :D ini buat background ya? nicee ;))

    *terima kasih sudah berkunjung di blog akuu~

    BalasHapus
  46. To Nurmayati Zain : iya untuk background apapun sob :) iya sama sama :)

    BalasHapus
  47. posting lgi donk gan, mw tw tutor yg lbh mnarik :D
    (knjungi yah)

    BalasHapus
  48. mejeng ah , sorry komen yg kemaren ya sob :D

    BalasHapus
  49. To aku mau gratisan : silahkan dikoleksi :)
    To How to be Vegetarian : ini aja blm di baca langsng minta yang lain :D hehehe
    To Mbah Qopet : iya gak apa apa sob selowes aja :)

    BalasHapus
  50. menarik gan backgroundnya, tapi saya tidak pakai gan . coz masih pakai yang standar saja supaya ga full size blognya :D

    BalasHapus
  51. To Fazri : hehehehe standar lebihj baik ya menurut sobat? :) oke deh :)

    BalasHapus
  52. Aku pake browser firefox kok... Untunglah, jadi bisa melihat aneka macam background pattern.

    BalasHapus
  53. Tepar ah dimari :D, Nasi aking dah abis tinggal nyisain Nasi jemur... Mau... Mau ... Mau... :P

    BalasHapus
  54. To @ Warkop Aremania : thanks supportnya kawan :Love
    To catatan kecilku : iya sob Firefox 3.6 ke atas :)
    To Amhar Sunny : silahkan di ikuti sob :)
    To Deganshah Putra : wkwokwokw nasi jemur ane baru tau bro :)) ane minta nasi bosok aja deh sob :))

    BalasHapus
  55. masih belom bosan aku menatap tuh pattern , , bagus sih :)

    BalasHapus
  56. To bayu : hehehehe jangan sampe bosen ya bro huahaha :))
    To IDEAL : thanks sob. mwb apaan sih?

    BalasHapus
  57. Wah keren mas, Saya cuma mau nanya untuk Border radius di Chrome kok gak bisa muncul yak kalau pake kode:-moz-border-radius? saya memakai MF,kira2 bisa bantu kode CSSnya seperti apa mas?

    Trims sebelumnya

    BalasHapus
  58. wah keren nih bro...ada motif batik gak nih hhahahah...eh bro mo nanya, ini gimana caranya bikin full isi posting tanpa sidebar kolom kanan, yang kayak punya kamu ini, jadi tambah enak baca artikel tanpa sidebar kolom kanan, ada tutorial a/ scriptnya gak?? saya request dunx..thnks ea..ditunggu hihihi^^

    BalasHapus
  59. Tidak ada alasan untuk tidak berkunjung ke Blog Farixantips ini.......
    Karna selalu ada tips yang unik dan Limited Edition.....
    ikut metrtamaikan, terimakasih

    BalasHapus
  60. Hmm... gantian disini skrng yg blm ada post :)

    BalasHapus
  61. ikut meramaikan ahh,, :P :P met hari raya idul adha sob,, mohon maaf lahir dan bathin,, =)) =))

    BalasHapus
  62. berkunjung sambil nunggu post brunya :D

    BalasHapus
  63. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  64. To Venomia Blog : Susah sob di jelasinnya :))
    di template ane sih seperti ini sob :)

    cari kode <div id='sidebar-wrapper'> trus ubah jadi :

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='sidebar-wrapper'>
    ...........
    </div>
    </b:if>

    NB : .......... karna kebanyakan kodenya ane singkat aja. pokoknya ........ itu antara kode <div id='sidebar-wrapper'> dan </div>

    kemudian cari kode ]]></b:skin> letakin kode berikut di bawahnya kode b:skin tadi :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .post-body{width:1000px;}
    </style>
    </b:if>

    Begini kode <b:if></b:if> itu adalah kode APABILA. apabila sobat sedang ada di halaman itu maka muncul/tidak muncul widget,object tersebut. kalau di blog saya (farixsantips) itu funsi <b:if> ini menghilangkan widget sidebar ane jika sobat sedang berada di post/blogpost.

    itu kode .post-body{width:1000px;} artinya jika sobat sedang ada di halaman postingan, post-body sobat menjadi berukuran 1000px seperti layaknya punya saya itu.

    ada kok di google sob tentang b:if itu, cari keyword cara menampilkan widget pada halaman tertentu

    BalasHapus
  65. To Bloggermie : begini sob :
    -moz- = MOZILLA FIREFOX
    -webkit- = SAFARI & GOOGLE CHROME
    -o- = Opera
    contoh ? -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;
    lebih baik pakai semu kode sob :)
    To Zaenal : aduh aduh makasih banyak ya sob kunjungan dan supportnya itu :) silahkan meramaikan :)
    To Putra Tenzhung : wahhhh iya iya :D sabar sabar bro :))
    To Rama : silahkan meramaikan :P iya sob mohon maaf lahir batin :)
    To Dayz : oke bro silahkan di tunggu postingan barunya :)

    BalasHapus
  66. wah keren..
    mungkin blog saya tambah bagus kalau ganti background..
    hehe :D..

    BalasHapus
  67. To socafahreza's blog : iya mungkin saja sob :) ketimbang warna yang monoton :) keep support me ya :)) thanks :Love

    BalasHapus
  68. ok bro makasih ea sharenya...aku coba dulu nih, moga2 bisa diterapkan di templateku..klo dh bs lsg dkabarin, hehehe..^___^

    BalasHapus
  69. To Venomia Blog : oke bro, maaf ya jika rupanya tidak cocok atau pas di blog sobat :(
    To Ibnu Siswoyo : silahkan di ramaikan :)

    BalasHapus
  70. wow, keren-keren sob..
    baru tau nih cara bikinnya, :D

    BalasHapus
  71. weh logo blognya ganti ya? keren-keren :)

    BalasHapus
  72. koleksi yang luarbiasa kawan, terimakasih sudah berbagi :)
    happy Idul Adha

    BalasHapus
  73. emang ada yaCh bro, ??? baru tau saya kalo gitu ... =))

    BalasHapus
  74. Wah,Faris mainnya Css trus :D
    Mante Deh :-*

    BalasHapus
  75. langsung di praktekkan hehehe :))

    BalasHapus
  76. mejeng2 dimari, ikut meramaikan , sun dulu, emah emah emah :-* :-*

    BalasHapus
  77. Mampir2,ikut ngeramain komentarnya :D

    BalasHapus
  78. wah keren mas bg patterns nya, tak terapkan dulu ya :)

    Oh ya boleh request nda cara membuat subcscribe dan related gitu? keren mas :)

    BalasHapus
  79. weih... pasti rame nih blog...
    ditunggu updatenya sob :))

    BalasHapus
  80. To A-NX : hehehe memang keren sob :) og gitu ya :)
    To Bayu : wkwokwokw iya nih :D ane lagi bosen aja logo yang kemaren :))
    To BlogS of Hariyanto : thanks banget sangat kawan :)) iya selamat ieedul adha juga :)
    To Shinobi Caemk : ada lah :D paling kalo yang kopas artikel ni ada :))
    To aku mau gratisan : wahhhh ada mahoooooo!!! b-(
    To Edy Sant : silahkan di praktekan :))

    BalasHapus
  81. To rama : silahkan mejeng mjeneg disini sob :)
    To FridiGraph : selamat idul adha juga sob :)
    To Musa : silahkan di ramaikan komentarnya :)
    To DAW-XP : silahkan di terapkan om :)
    itu kan hanya dengan kode :
    <div style='float:left; margin-right:5px;'>KOTAK RELATED POST</div><div style='float:right; margin-left:5px;'>KOTAK SUBSCRIBE</div>
    Kode left right itu tata letak box di kiri atau bisa di kanan :)
    To Setia Ji : silahkan di tunggu sob :))

    BalasHapus
  82. waaahaha.. kalo copas mah, tidak salah lagi bro .. =))

    BalasHapus
  83. kunjungan perdana sobat, sekaligus meyinggahi sobat baru.

    Btw, keren juga ya sob CSS3, ntar saya terapin ah di blogku

    BalasHapus
  84. Background blog saya berupa image jadi membuat loading blog jadi agak berat. Sepertinya saya perlu menggantinya dengan css background pattern ni..
    Trims atas info dan tutorialnya..

    BalasHapus
  85. koleksi yg ini blm punya nih, aku ijin comot deh...
    :)

    BalasHapus
  86. To Ban Terbaik di Indonesia GT Radial : iya sob tidak salah lagi, jgn sampe dah di kopasin :))
    To Arriyadh Prayugo : thanks ya gan untuk kunjungannya di blog saya ini :)
    To Alprablog : iya sob memang keren sangat :D
    To Mbah Qopet : silahkan di makan sob hidangannya :))
    To >>>ichwan HAUSGAME : thanks sob supportnya :)
    To Rina As : iya sob background blog kamu masih dalam keadaan standar :)
    To Penghuni 60 : silahkan di comot koleksi ku sob :))

    BalasHapus
  87. Waah,,, Kalo Bekgron dikasi Pattern gitu emang keliatan tampak keeren yach... cocok BGT kalo buat Kreasi Bekgron yg berbeda2 disetiap postingan!!
    Ayas ijin Bookmark Sob,,, buat Referensi!!
    MAKASI BGT Boss..

    BalasHapus
  88. To Bagibagiblog : iya sob untuk kostum post seperti pada blog punya sobat cucok sekali itu sob kode ini :) hehehe sama sama :)
    To DAW-XP : sama sama sob :) saya selalu di blakangmu :)

    BalasHapus
  89. Kunjungan kembali..wah ternyata abu belum follow sini toh,,maklum biasanya langsung menuju ke postingan.jadinya abu follow sini..Maaf komentarnya tidak relevan ini sama postingannya

    BalasHapus
  90. Meramaikan dan menungu postingan barunya sobat..sudah tidak sabat lagi akan berbagi apa lagi nih sobat farixsan...

    BalasHapus
  91. datang lagi, meramaikan suasana sob...

    BalasHapus
  92. buang aja ke laut sob, kalo ada yg kopasin artikel ente ... :D =))

    BalasHapus
  93. uwwoooww,,, kereeen jadinya...:-o

    BalasHapus
  94. To Abu farras : wahhh belom follow ya? makasih ya followingnya :) tidak apa apa sob :)
    To cardiacku : wahhh makasih ya sob supportnya :) aduhh makasih banget ya cardiacku :)
    To >>>ichwan HAUSGAME : silahkan di ramaikan suasanyanya :)
    To rockmanticks : sabar bro :)
    To kerajaan air mata : oke deh sob sukses juga :)

    BalasHapus
  95. To Shonobi Caemk : iya sob kita s[pam spam dia :))
    To yAhyA : iya sob menurut ane juga gitu jadinya :)
    To Rama88 : silahkan di ramaikan suasanyanya :))
    To Belajar Komputer : terimakasih ya gan support blog ane :)
    To Best and Cheap Mobile Phone : kalau berkenan silahkan di coba aja dulu :)

    BalasHapus
  96. Menunggu postingan berikutnya kawan

    BalasHapus
  97. mf ru sempt mampir sob we jatah coment terakhirhehehe

    BalasHapus
  98. To Ummu Nailah : belum di baca :))
    To katils : hehehe gak apa apa sob :) sekarang ane yang terakhir :))

    BalasHapus
  99. haha....gw paling demen buncit

    BalasHapus
  100. To katils : buncit gimana sob huahahahha =))

    BalasHapus
  101. keren gan, oh iyh gan, ane mau nanya nie, gmna si caranya buat tampilannya cuman latar belakang/background ama tulisan ajah? kaya di blog U

    BalasHapus
  102. To lilo : yasudah sob background pada post-body di hilangkan alias transparent :) jadi yang terlihat hanyalah bq body saja

    BalasHapus
  103. assiiiikkkk, ini yg sy butuhkan utk web sy ntar,,,

    BalasHapus
  104. To Windows 7 Blog : alhamdulillah deh kalau begitu semoga bermanfaat ya kawan

    BalasHapus