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.
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.
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.
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.
- Buat kode <div></div>
- pada kode <div> tambahkan kode style="KODE CSS3 PATTERNS"
- Contohnya seperti ini :
<div style="KODE CSS3 PATTERNS"></div>
Kode bisa di salin dengan kode yang ada di box berwarna itu. - Edit style box (box-shadow, text-shadow, padding, margin, dan lain lain) seperlunya dan SELESAI.
PERTAMAX dolo =))
BalasHapusohiya ane mau ganti background buat blog ane nih, ada yg lain gak tuh, jgn yg cerah2,, =)) =)) nyari nya dimana..?
BalasHapusiya nih... warnanya terang banget bro ... :D
BalasHapuswah 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...
BalasHapusTo Rama : silahkan nikmati pertamax :Pudah ane tambah tambahin tuh :D
BalasHapusTo shinobi : udah di tambahin :))
To bopfive5 : sebenernya biasa saja, tapi kalau di gabungkan menjadi indah :)) pasti bisa kok sob :)
BalasHapusWiih.... keren juga jadinya... :D
BalasHapusini mantabb Sob...ringan banget dibandingkan bg image. Moga semua browser cepat update dan bisa menjalankan css3 dengan baik...Nice share and happy blogging!
BalasHapuskeren tu yg polos ... :)
BalasHapuskren juga nih ane coba tar ah :))
BalasHapushmmm....
BalasHapussip dahh
disini selalu update untuk optimasi blognya...
btw.. klo backgroundnya gambar sendiri gimana caranya sob?
wah keren-keren sob , ane pernah coba jadi berat loadnya :(
BalasHapusbackground yg warna pink putih hitam biru(yg polos) kenapa banyak banget kodenya ? kan bisa pake kode warna rgba
BalasHapuswew,, keren keren background dari CSS ini sobat...
BalasHapusAne juga seneng banget ngumpulin background pattern buat design blog.. thanks udah nambahin :D
BalasHapusTo Catatan ngeblog : hehehehe :) sip om kerenya :)
BalasHapusTo 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 :)
To Putra Tenzhung : wahhh ngoleksi juga ya? :D wahhh sama kalau begitu :)) okedeh :)
BalasHapusWuih, tutorialnya keren banget bro :D
BalasHapuswah comment ane dhapus :((
BalasHapuskode pattern selain d demo ad gk?
sipppp neh,, lumayan wat koleksi kang
BalasHapusSungguh 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.
BalasHapuswah manteb neh .. bagus2 lagi demonya, ,
BalasHapusTo Pradisz Wardana : thanks banget bro :)
BalasHapusTo 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
To topjer : iya kang :)
BalasHapusTo Er'end : mungkin memang CSS3 gradient linear tidak valid di w3validator
To Bayu : hehehehe iya sob, namanya juga lagi koleksi :))
seeepppp.... keren2 templatenya sob,, ijin copas scriptnya sob, sempat sewaktu2 dapat berguna sob...
BalasHapuskapan bisa di terapkan di belog saya. wong saya rang deso gak ngerti gini gini'an!
BalasHapuswaaaa... demonya dipindahin ... :D
BalasHapusBerkunjung gan.
BalasHapusPandai sekali kamu ini gan membuat tutor
hebat gan
Wah ada koleksi ilmu yang bagus dan jarang kudapat hehehe
BalasHapusmntap bro dari dulu aku juga mau posting bg ini tapi gak jadi2 hehehe akhirnya di posting juga disiini sipp
BalasHapusbox-shadow bikin ngejreng..
BalasHapusthanks inpo css3nya kawan :D
To Asis Sugianto : thanks sob hihihi :) silahkan di copas script CSS3nya :))
BalasHapusTo 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
ikut meramaikan ahhh,, =)) =)) =)) =))
BalasHapusTo Rama : oke sob meramaikan aja :)
BalasHapusbagus sahabat css-nya....tak simpan dulu siapa tahu nanti membutuhkan seperti ini
BalasHapusTo Abu Farras : memang bagus sob, simpan saja untuk bekal sobat dirumah :))
BalasHapusya iyalah bro.. blog ente .. masa ente mau ngasih demo di blognya org lain .. :D :P
BalasHapusKalau berkunjung di sini pastinya sering disuguhi segala hala tentang CSS dan semunya bagus-bagus sobat...
BalasHapusLanjutkan
To Shinobi : kan ada juga yang blog ngasih demo ke link orang lain :D huahaha :))
BalasHapusTo cardiacku : oke saya lanjutkan :) thanks banget ya kunjungannya
kesini lagi membaca koleksiu hehehe
BalasHapuswah ternyata kamu jago main css ya gan ,, ajarin donk,semua post kamu pasti css lagi,,ckkcc
BalasHapusPena hadir dan absen sore gan...keren nih postingannya sobat..perlu untuk dicoba nih sekali-kali nantinya
BalasHapusBackgroundnya keren.... :D
BalasHapushehe.. ie memang payah tuh... tapi kok visitor amerika selalu gunain ie ya??? mang bikin bingung aja tu orang2 luar
BalasHapusKeren dan bagus koleksinya sahabat...
BalasHapusbackgroundnya keren-keren sob
BalasHapusmemang kreatif agan yg satu ini,, ajarin ane dong gan :D
BalasHapusok ..
BalasHapusmakasih keterangannya sob...
btw ane punya postingan baru nih sob..
di earth-inside
To Anisayu : hehehe silahkan di baca caba koleksinya :))
BalasHapusTo 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. :|
To ibnu siswoyo : thanks gan supportnya :)
BalasHapusTo 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 :)
ohh :D ini buat background ya? nicee ;))
BalasHapus*terima kasih sudah berkunjung di blog akuu~
To Nurmayati Zain : iya untuk background apapun sob :) iya sama sama :)
BalasHapusIjin koleksi Sob :D
BalasHapusposting lgi donk gan, mw tw tutor yg lbh mnarik :D
BalasHapus(knjungi yah)
mejeng ah , sorry komen yg kemaren ya sob :D
BalasHapusTo aku mau gratisan : silahkan dikoleksi :)
BalasHapusTo 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 :)
menarik gan backgroundnya, tapi saya tidak pakai gan . coz masih pakai yang standar saja supaya ga full size blognya :D
BalasHapusTo Fazri : hehehehe standar lebihj baik ya menurut sobat? :) oke deh :)
BalasHapusmantab abis sharenya kawan
BalasHapusAku pake browser firefox kok... Untunglah, jadi bisa melihat aneka macam background pattern.
BalasHapusAhhh ikutan Sobat..
BalasHapusTepar ah dimari :D, Nasi aking dah abis tinggal nyisain Nasi jemur... Mau... Mau ... Mau... :P
BalasHapusTo @ Warkop Aremania : thanks supportnya kawan :Love
BalasHapusTo 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 :))
masih belom bosan aku menatap tuh pattern , , bagus sih :)
BalasHapuskeren sob, tp sayang ane di mwb
BalasHapusTo bayu : hehehehe jangan sampe bosen ya bro huahaha :))
BalasHapusTo IDEAL : thanks sob. mwb apaan sih?
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?
BalasHapusTrims sebelumnya
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^^
BalasHapusTidak ada alasan untuk tidak berkunjung ke Blog Farixantips ini.......
BalasHapusKarna selalu ada tips yang unik dan Limited Edition.....
ikut metrtamaikan, terimakasih
Hmm... gantian disini skrng yg blm ada post :)
BalasHapusikut meramaikan ahh,, :P :P met hari raya idul adha sob,, mohon maaf lahir dan bathin,, =)) =))
BalasHapusberkunjung sambil nunggu post brunya :D
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusTo Venomia Blog : Susah sob di jelasinnya :))
BalasHapusdi template ane sih seperti ini sob :)
cari kode <div id='sidebar-wrapper'> trus ubah jadi :
<b:if cond='data:blog.pageType != "item"'>
<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 == "item"'>
<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
To Bloggermie : begini sob :
BalasHapus-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 :)
wah keren..
BalasHapusmungkin blog saya tambah bagus kalau ganti background..
hehe :D..
To socafahreza's blog : iya mungkin saja sob :) ketimbang warna yang monoton :) keep support me ya :)) thanks :Love
BalasHapusok bro makasih ea sharenya...aku coba dulu nih, moga2 bisa diterapkan di templateku..klo dh bs lsg dkabarin, hehehe..^___^
BalasHapusMeramaikan kembali sahabatku
BalasHapusTo Venomia Blog : oke bro, maaf ya jika rupanya tidak cocok atau pas di blog sobat :(
BalasHapusTo Ibnu Siswoyo : silahkan di ramaikan :)
wow, keren-keren sob..
BalasHapusbaru tau nih cara bikinnya, :D
weh logo blognya ganti ya? keren-keren :)
BalasHapuskoleksi yang luarbiasa kawan, terimakasih sudah berbagi :)
BalasHapushappy Idul Adha
emang ada yaCh bro, ??? baru tau saya kalo gitu ... =))
BalasHapusWah,Faris mainnya Css trus :D
BalasHapusMante Deh :-*
langsung di praktekkan hehehe :))
BalasHapusmejeng2 dimari, ikut meramaikan , sun dulu, emah emah emah :-* :-*
BalasHapussip2
BalasHapusselamat idul adha :)
Fridi Graphic
Mampir2,ikut ngeramain komentarnya :D
BalasHapuswah keren mas bg patterns nya, tak terapkan dulu ya :)
BalasHapusOh ya boleh request nda cara membuat subcscribe dan related gitu? keren mas :)
weih... pasti rame nih blog...
BalasHapusditunggu updatenya sob :))
To A-NX : hehehe memang keren sob :) og gitu ya :)
BalasHapusTo 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 :))
To rama : silahkan mejeng mjeneg disini sob :)
BalasHapusTo 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 :))
waaahaha.. kalo copas mah, tidak salah lagi bro .. =))
BalasHapuskunjungan perdana sobat, sekaligus meyinggahi sobat baru.
BalasHapusBtw, keren juga ya sob CSS3, ntar saya terapin ah di blogku
CSS memang keren :D
BalasHapusmampir dulu , nunggu makanan
BalasHapusbisa keren gitu sob,,,manteb
BalasHapusBackground blog saya berupa image jadi membuat loading blog jadi agak berat. Sepertinya saya perlu menggantinya dengan css background pattern ni..
BalasHapusTrims atas info dan tutorialnya..
koleksi yg ini blm punya nih, aku ijin comot deh...
BalasHapus:)
To Ban Terbaik di Indonesia GT Radial : iya sob tidak salah lagi, jgn sampe dah di kopasin :))
BalasHapusTo 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 :))
Waah,,, Kalo Bekgron dikasi Pattern gitu emang keliatan tampak keeren yach... cocok BGT kalo buat Kreasi Bekgron yg berbeda2 disetiap postingan!!
BalasHapusAyas ijin Bookmark Sob,,, buat Referensi!!
MAKASI BGT Boss..
oh, ok thanks sob. :)
BalasHapusTo Bagibagiblog : iya sob untuk kostum post seperti pada blog punya sobat cucok sekali itu sob kode ini :) hehehe sama sama :)
BalasHapusTo DAW-XP : sama sama sob :) saya selalu di blakangmu :)
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
BalasHapusMeramaikan dan menungu postingan barunya sobat..sudah tidak sabat lagi akan berbagi apa lagi nih sobat farixsan...
BalasHapusdatang lagi, meramaikan suasana sob...
BalasHapusgan followes ganti di tunggu???
BalasHapuswah, mantap mas bro..sucses deh
BalasHapusbuang aja ke laut sob, kalo ada yg kopasin artikel ente ... :D =))
BalasHapusuwwoooww,,, kereeen jadinya...:-o
BalasHapusikut ngeramein ahhh.. :P :P
BalasHapusbagus benar blog templatenya gan
BalasHapusini bikin blog berat gak yah?
BalasHapusTo Abu farras : wahhh belom follow ya? makasih ya followingnya :) tidak apa apa sob :)
BalasHapusTo 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 :)
To Shonobi Caemk : iya sob kita s[pam spam dia :))
BalasHapusTo 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 :)
Menunggu postingan berikutnya kawan
BalasHapusmf ru sempt mampir sob we jatah coment terakhirhehehe
BalasHapusTo Ummu Nailah : belum di baca :))
BalasHapusTo katils : hehehe gak apa apa sob :) sekarang ane yang terakhir :))
haha....gw paling demen buncit
BalasHapusTo katils : buncit gimana sob huahahahha =))
BalasHapusmantap :)) =))
BalasHapusTo BLOGBEGO : thanks :)) =))
BalasHapuskeren gan, oh iyh gan, ane mau nanya nie, gmna si caranya buat tampilannya cuman latar belakang/background ama tulisan ajah? kaya di blog U
BalasHapusTo lilo : yasudah sob background pada post-body di hilangkan alias transparent :) jadi yang terlihat hanyalah bq body saja
BalasHapusassiiiikkkk, ini yg sy butuhkan utk web sy ntar,,,
BalasHapusTo Windows 7 Blog : alhamdulillah deh kalau begitu semoga bermanfaat ya kawan
BalasHapus