Tales Of Zestiria PC Games

Tales of Zestiria mengambil setting sebuah benua fiksi bernama Greenwood. Greenwood terpisahkan oleh dua negara yang masuh bertikai, Highland Kingdom, yang diperintah oleh sebuah kerajaan berbasis konstitusi, dan Laurence Empire. Di sepanjang Greenwood, dikenal kotoran yang dipicu oleh emosi negatif manusia, yang berujung pada terciptanya monster bernama Hyoma, yang kini menjadi ancaman manusia.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Senin, 31 Desember 2012

Black Rock Shooter Blogger Template


Hello sobat~ detik" sebelum tahun 2013 ,saya mau sharing template terakhir di akhir tahun ini :) .template hasil redesign shinpuru,dengan tema anime black rock shooter.
template ini saya buat sederhana post dengan thumbnail 1 sibar dan 2 column footer,bukan template responsive ,hanya template yang sederhana tapi unik.




Screenshot




1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>


2. Setting SEO

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Selesai deh template kelima ini.saya dan keluarga mnegucapkan selamat tahun baru 2013,semoga ditahun 2013 bisa menjadi lebih semangat,lebih baik,lebih baik dan leih baik lagi dari tahun kemarin.arigatou minna-san,ganbatte kudasai!! happy new year!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (lol)





Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


Sabtu, 29 Desember 2012

Shinpuru V2.2 blogger Template



Hello again~ mungkin terdengar aneh atau lucu dan kurang kerjaan karena bisa"a saya buat versi 2.2 (lol).apa bedanya dengan yang versi sebelumnya? yang berbeda hanya lebar posting,tampian readmore,posisi judul blog,font,footer dan lebar posting pada halaman depan,kalau versi lamanya cuma 3 column,yang versi ini 4 column,jadi mungkin untuk template ini lebih cocok sebagai photo gallery.





1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>



2. Setting SEO

Khusus template ini,pengaturan meta tag dan SEO sudah saya ubah,jadi ada yang harus di setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.

have a nice day~

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Selesai deh template keempat @____@ (ane tepar buat template sehari 1 saat liburan~xD) di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.



Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


Jumat, 28 Desember 2012

Shinpuru V2 Blogger Template



Hello again.kali ini saya membuat template shinpuru versi kedua dari template sebelumnya yang merupaka template yang simple,fast loading dan ringan . apa bedanya dengan versi yang pertama? bedanya template V2 yang paling terlihat ini adalah posting yang menggunakan style thumbnail dan template yang responsive .  artinya akan menyesuaikan dengan resolusi monitor yang kita gunakan.berikut contoh screenshot dengan ukuran yang berbeda:



Gambar 1.1


Gambar 1.2

Dan supaya lebih elegant,tombol readmore pada post juga sudah saya modifikasi seperi gambar dibawah ini:

Gambar 1.3


1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>



2. Setting SEO

Khusus template ini,pengaturan meta tag dan SEO sudah saya ubah,jadi ada yang harus di setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.

have a nice day~

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Selesai deh template ketiga di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.






Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


Kamis, 27 Desember 2012

Shinpuru Blogger Template


Shinpuru blogger template,shinpuru berasal dari bahasa jepang yang berarti simple.:)
template yang kedua ini adalah template dasar sebelum menjadi template anime note yang sudah saya publish kemarin.designnya saya buat sederhana mungkin dan ringan,tetapi tidak melupakan style posting yang sudah saya atur 560px untuk halaman depan,jadi saya sarankan selalu memasukan gambar HD atau gambar ukuran besar pada posting di paragraf pertama~


Screenshot



1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>



Selesai deh template kedua di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.

happy holiday~xD Hohohoho



Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


Rabu, 26 Desember 2012

Anime Note Blogger template


Hello minna-san,selamat natal dan tahun baru ^^~
pada kesempatan kali ini saya sendiri sedang liburan,jadi ada waktu untuk melanjutkan project yang ketunda sekitar 3 bulan yang lalu karena sibuk"nya dengan tugas kuliah dll.
dari 4 template yang sedang buat,"anime note" adalah salah satu template yang simple,tapi mungkin agak berat karena menggunakan fitur random background dengan 10 gambar anime.tergantung kecepatan koneksi kalian juga sih~xD



Screenshot



Anime note dengan tema anime,seperti yang saya sebutkan tadi,template ini menggunakan fitur random background.
lalu saya juga buat template ini menggunakan fitur tab pada posting dan footer atau saya sebut widgetbar.kenapa widgetbar?karena di tab widgetbar ini hanya berisi gadget" seperti bloglist,linklist,feed,followers,dll.sedangkan pada tab post adalah isi posting blog,jadi tab ini memisahkan antara post dengan widget.

10 Gambar background Anime note



1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>



2. Setting jumlah posting

Untuk menentukan jumlah posting pada blog,buka blogger=>layout,klik edit pada blog posts

setelah itu ganti angka pada option main page,


Tentukan jumlah posting yang ingin ditampilkan pada blog kalian.(tidak harus 1 juga,bebas)




3. Setting Random background

Buka blogger =>template => Edit HTML
lalu cari script seperti dibawah ini.
<script type='text/javascript'>
var banner= new Array()
banner[0]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQs7ukyi0iMZHDPS9zCZHFoyIq6iSxYJCSpca9pGaxaitVYk2HsqZ-dyJjg8Z-jKG2Vi1W0q4RJcUr_Q2flRDw9WY_Ez6-7IkTnlZKDW9J0a5ro4S3bDjym9sNXOoEcbbNlV1KQ0zjTqHA/s1600/dsf.jpg&quot;
banner[1]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rkmvWP-NZYl7ukTIJ-3lcVrvDwmyIBUlrmBhoj3AZaSlwglO84kPSfDWm75ZTq6Mhf2b-J2McdIc8ym0MNpNTzi98ji1GGQtx57FmSriGPaVnYJj1AqFQu5DbfdrlLUk8mFJF0eMIM3n/s1600/rg.jpg&quot;
banner[2]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmezFIfh7tj6qfd_MawwL55KCf0esqdfpnKeEt124lPK-d7Rfh7A67a-90lvjNxRObftKW8Nyp919lTCSmhWhZb7pBv0Y0oWnXuyP9iUM4wsuMQedsBIRHqWgZnwULOInRskv_6LZxaF3s/s1600/3.jpg&quot;
banner[3]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1GBh4ersE2_bQ8YMbohm1AA_vYdBQTDHIIi72QCUaq2BVQ5vIRdkhLhwe7Sxa9IizxRXHtyttRyKZJVJIoVPcx9u_RU4oWqxGW6MNTZE97dEOdlL-mfC5y7OfBtda9oXSoc9OzY-8m7h/s1600/Konachan.com+-+150749+bob_(biyonbiyon)+dress+feathers+hatsune_miku+thighhighs+twintails+vocaloid+wings.jpg&quot;
banner[4]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXEoCASIpUbG2RoD-W6UHmZoFIYhXjt7bc2VcpQKro-iVAYWYENfA9mv5I8ZJ08Y1Tap8gWXIObTW1lrw1alN_Ft3Ha-_34O3Bj4HAWEmFiO26IAdO4Vkr7U-M6iS2lhWMyNvZCtTpe9x/s1600/ll.jpg&quot;
banner[5]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMLzMMRpYrYP154kciW9YbBWaJwVRb-gddBCRsFpTdgUfKW7NPPYwYKnAeFKjGdQIhLmbZ-8RGH8rmd3k3RnHhSV40nHHjoF8RMaU42gV5VSXXuMXojlrFjM5bRzAlHlCiDdP8hd1txYb/s1600/Konachan.com+-+150773+aqua_eyes+aqua_hair+hatsune_miku+long_hair+tagme+vocaloid.jpg&quot;
banner[6]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKkbQWGQjKYtq6h6JmtoWuVXqfTlYH0-FMngSdqx3aY-hs-TrlNrBsMIoq0IE08-IxXRKX4DAjJ2pSlbw0J3BqHfu5jiYnG6s-g1JkQO2tdfZykRhwbBMaFeNkyx2Ra-uBqn8GxvbI2Xa/s1600/2.jpg&quot;
banner[7]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3W7FxJ-_VdVzjoYeOe4CaqsBdRzHqGrdSpjI1qupkU9bdpyt-UvFHLz7S_gr6ppUvEFwDlpTMKjKivx7-JnQWh0VR0KUHm8HbQdVYcVM29_qBlJhi7zQ6ODZQ2A0hEb23_YdpUzpEGRzA/s1600/wef.jpg&quot;
banner[8]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTekuxkv3Aqe8-Jz5ekXC5oBg5WujRKzTEzVKdgLcO5V0wlFqrmi4YOl_irhzir5frAd2t-OQs3urzIVEA2-QE9iv2NvPJNtghAyRBO6DL-om4MCHSuRwMfmN6KKn49S-71jeDx2COTVG/s1600/4.jpg&quot;
banner[9]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIRjOpTuVkaGM1V-VjODA7JvIVpj0O0Y3I-X1CG6H7qdcbQ99N6mW-xcV1uYQ1-YDa1Iuw9U8oRCVbo_CWZx-8-Ps4Y1plqoaaY_6OAJbH16UgZ9Ap0rz5kMGgVAyzu_TJXOgNDUGthFS/s1600/Untitled-1.jpg&quot;
var random=Math.floor(10*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background:url(&quot;&#39; + banner[random] + &#39;&quot;) no-repeat top left;&#39;);
document.write(&#39; background-size:100%;&#39; );
document.write(&#39; background-attachment:fixed;&#39; );
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Untuk mengganti gambar backgroundnya,kalian cukup mengganti url gambarnya. :)



Jika kalian tertarik dengan template aneh ini,silakan download dan dicoba .Free!! dan dilarang diperjualbelikan.bijak lah menggunakan template gratis dan selalu menghargai hasil kerja keras orang lain.maju terus blogger indonesia,terima kasih masih tetap setia mengunjungi blog aneh ini,semoga blog ini tetap bermanfaat ^^.sharing is caring
happy holiday~xD





Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


Selasa, 13 November 2012

Banner Slider dengan CSS3


Banner Slider dengan CSS3,yaitu beberapa gambar/image banner yang dimasukan kedalam 1 slider.jadi fungsi'a sama saja dengan photo slider yang saya dapat dari website : iamceege.saya hanya mengedit CSS dan HTML'a,sehingga ukuranya menjadi pas 468px x 60px.contoh'a bisa kalian lihat sendiri pada blog saya,yui-indo atau gambar dibawah ini.



screenshot


Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.


CSS : diatas code ]]></b:skin>

HTML :letakan diantara kode html/didalam <body> dan </body>
(tergantung kamu mau diletakan dimana.)


HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>




a href='#' (ganti tanda pagar ddengan URL link yang dituju)

title='#' (ganti dengan nama link yang dituju)

'urlgambar' (ganti dengan Url site yang dituju)




CSS


#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}









Oia,untuk slidernya sendiri sudah saya atur agar kecepatan slide'a lebih lambat dari aslinya,yang diatur dengan css keyframe slide-animation.

dan juga menurut saya pemasangan banner ini terbatas,hanya4 buah.kenapa tidak bisa lebih?
sebenarnya bisa,pertama,kamu perhatikan CSS dibawah ini.





@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagai mana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.




Note:-diatas hanya contoh,karena slider'a ini crossbrowser antara mozzilla dan chrome,maka perhatikan awalan depan css moz dan webkit,nilai'a harus sama.





Untuk pengaturan posisi slidernya,menggunakan margin.

margin:0px 0px 0px 0px;

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}




Setting diatas masih default,kamu tinggal mengatur nilai margin left,top,right dan bottomnya.





yahh,sebenarnya trik ini awal"a cuma iseng" untuk blog saya sendiri,tapi karena saya rasa banyak dibutuhkan juga dan bermanfaat untuk mengurangi pemakaian tempat banner,jadi saya share deh :)

oia saya ingatkan sebelumnya,sebelum menggunakan trik banner ini,ada baiknya membackup template agar tidak terjadi sesuatu yang tidak diinginkan,dan selalu ingat tidak menggunakan CSS secara berlebihan agar tidak memberatkan blog kamu.

semoga bermanfaat,arigatou gozaimasu minna~

Rabu, 24 Oktober 2012

Rikka Takanashi Blogger Templates


Akhirnya Selesai juga template Rikka'a,yah pasti tau anime yang satu ini,yang juga menjadi anime favorite saya :) template kali ini saya beri dengan tema Rikka takanashi,dari tokoh anime di seri Chuunibyou Demo Koi ga Shitai!.


Akhir" ini benar" sibuk dengan urusan kuliah,tugas menumpuk trus.tapi karena ga tahan ingin buat thema'a tentang anime Chuunibyou Demo Koi ga Shitai,sambil curi" waktu sedikit saya buat dari template dasar sword art online,saya design ulang pada bagian header,posting dan footer'a,serta memperbaiki sedikit" kekurangan dan menambahkan fungsi dropdown menu pada bagian menubarnya,karena banyak'a request menu dropdown.untuk design'a sendiri,saya mengedit'a dahulu pakai photoshop,karena minggu" ini sangat sulit untuk mencari gambar header Rikka yang cocok,jadi saya edit sendiri saja deh~.

dan untuk hasil'a kalian dapat melihat preview dibawah ini ^^


Preview



Pengaturan Menu

<ul class='dark_menu'>
<li><a class='selected' href='#'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>


Ganti tanda pagar '#' dengan url link site yang kamu inginkan.



sip deh,akhirnya lega juga~xD
Bila tertarik,silakan dicoba~xD
ok deh,terima kasih,saya undur diri lagi,mohon maaf kalau saya jarang" aktif,semoga masih ada banyak kesempatan waktu untuk saya aktif blogging lagi,mohon maaf apabila ada komentar yang tidak dibalas,masih banyak tugas menunggu di belakang,besok juga harus siap" menghadapi dosen yang killer",ampun deh~xDD
Akhir kata,Arigatou gozaimasu~








Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html










Selasa, 16 Oktober 2012

iPhone Style, slide to unlock dengan jquery dan CSS3



Apa kabar sobat~ akhirnya ada sedikit kesempatan juga untuk posting blog,karena kebetulan hari ini libur 2 hari~xD
Trik kali ini saya dapatkan dari CSS triks.com dengan tidak sengaja.awalnya cuma iseng' browsing trik CSS,lalu saya menemukan trik yang cukup menarik,yaitu Slide to unlock.trik ini sebenar'a udah lama juga,tapi karena saya lihat masih jarang",saya post deh~


contoh pada css-tricks.com


contoh trik modifikasi saya


apa bedanya dengan trik yang asli?

trik yang saya modif ini,diterapkan untuk blog sebagai welcome screen/splash screen.jadi fungsi slide'a menjadi tombol/menu pembuka/opening blog kita.



Tujuan dari Trik yang berupa CSS3 dan jquery ini , kalau menurut saya yang buat juga hanya iseng" agar mirip dengan sistem Unlock di Iphone.Setelah saya coba demo'a.wah ternyata lucu juga ya,ketika kita drag pointer ke kanan,maka automatis kebuka/ilang slide'a?
setelah saya periksa CSS'a ternyata Css'a menggunaka CSS keyframe yang tidak looping.teori'a sebelum kita geser slide,display masih keadaan "Block",setelah kita drag ke kanan sejauh 720px,posisi display menjadi "none".wah menarik juga nih.

lalu saya cari ide bagaimana cara menerapkan slide to unlock ini untuk fungsi lain.
saya iseng" otak atik,dan akhirnya berguna juga untuk unlock screen yang ada di blog kita *.*

bagaimana cara'a? yahh,karena ini kesempatan yang langka juga untuk saya posting,saya ceritaiin deh~xD

Pertama,begini teori'a: yang kita inginkan slide itu ada dilayar fullscreen,melayang diatas blog kita,dan kalau di unlock,slide'a hilang dan menampilkan blog kita kembali.jadi trik yang saya buat ini mirip" splash Screen atau welcome screen sebelum memasuki blog kita.kalau sudah berfungsi,tinggal tambahkan accesoriss agar tampilan'a tidak agak membosankan.misal yang ada diblog saya,saya tambahkan text messages dan gambar miku ^^

Kedua,bagaimana cara'a? :dari teori diatas,bisa saya simpulkan yaitu:
1. Bagaimana cara'a melayang?
Jawab: tambahkan Css position:fixed;

2. bagaimana cara'a slide itu ada dilayar fullscreen
Jawab: tambahkan warna background dan dibuat panjang dan lebar 100%
CSS : background:#000;(warna bg)  dan  width:100%;height:100%;
saya juga menambahkan z-index:9999 dan seterusnya,agar posisi objek ada di layer paling atas/tertinggi dari semua element dibelakangnya


3. bagaimana cara'a kalau di unlock,slide'a hilang dan menampilkan blog kita kembali?
Jawab: bagaimana cara'a? saya juga mengira itu efek dari CSS'a,tapi itu efek dari jquery'a;

$(function() {
$("h2 img").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); });


4. bagaimana cara'a menambahkan gambar dan text seperti blog johanes?
jawab :
-nah kalau yang ini,saya kreasikan sendiri~xD
-saya buat HTML sendiri dengan nama class .pesan,.pesan1,.headpesan.

.pesan saya isi dengan text ;blog johanes tidak aktif untuk sementara

.pesanhead saya isi dengan : messages from admin

.pesan1 saya isi dengan blablablablabla.panjang deh.wkwkwk

untuk gambar mikunya,cuma seperti biasa menggunakan img src,tapi luarnya saya tambahkan html dengan class name .gambarmiku. kenapa saya tambahkan? agar gambar'a bisa diatur letak dan posisinya.

5. bagaimana cara mengatur posisinya?
jawab:
menggunakan margin.

6. bagaimana cara menggunakan margin?
tambahkan saja margin-left ,margin right,margin-top dan margin bottom.
tinggal atur posisi'a/nila px.
misal:
mau geser kekanan : margin-left:10px;
mau geser keatas :margin-bottom:10px;

(tinggal atur nilai'a berapa jauh mau kamu geser objeknya.)

7. kenapa margin left bisa kekanan?
jawab:maksud dari margin left itu,memberi jarak dari sebelah kiri,maka objeknya akan kegeser kearah kanan,dan juga sebaliknya.tapi bila nilai'a kamu beri nilai minus,maka objek'a akan bergeser ke arah kiri.


8. kenapa bisa?
jawab: sebelum'a saya tanya dahulu,pernah belajar matematika tidak? xDD


Sebenarnya prinsipnya sama seperti gambar diatas.
begini teori'a,misal ada obkek sebuah bola.saat posisi margin 0,pasti kalau digambar posisinya ditengah bukan?
lalu misal kita tambahkan margin-left:5px;
jadi seperti gambar dibawah ini


maksudnya margin-left itu,posisi vertikal geser dari kiri-kekanan.tetapi kalau horizontal .margin-top dari posisi atas kebawah.(minus dan plus jadi terbalik/jadi kebalikanya).kecuali bila diberi nilai minus,maka hasil'a margin left bergeser ke kiri dan sebaliknya.

ax² + bx + c = 0  ax² + bx + c = 0  a (x + p/a) (x + p/a) = 0
 x1 = - p/a dan x2 = - q/a

itulah teori singkat tentang margin.
loh,kq jadi out off topic?=___="
wah,sepertinya saya kebanyakan belajar kalkulus~xDD



9. bagaimana mengedit style pada text " Slide to unlock " ?

kamu cukup perhatikan CSS yang saya tandai dibawah ini.


#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}




warna ██ : warna text:ganti kode warna hexadesimal'a.karena text efek'a menggunakan color gradient

kode #8B836F adalah warna ██ dan kode #52CFD2 adalah warna ██
jadi kalau digambarkan menjadi seperti ini


dan karena menggunakan efek animasi css 3,maka akan bergerak secara halus dari kiri kekanan.




warna ██ : Untuk mengatur nilai rounder/bulat pada objek tersebut.

warna ██ : untuk mengatur tebal,tipe,dan warna border.

warna ██ : untuk mengatur ukuran text.

warna ██ : tipe font.

warna ██ : jarak dari atas objek ke atas sejauh 130px. (bisa dirubah nilai'a,tinggal sesuaikan~

10. dan terakhir,bagaimana agar trik ini hanya berfungsi di home page saja?
jawab: kita tinggal menambahkan html tag conditional atau bisa lihat lebih lengkap'a disini untuk penerapanya.

sipp,kembali ke slidenya~xD


langsung saja cara pasang'a,pertama copy paste CSS yang sudah saya modifikasi dibawah ini(tidak sama dengan blog saya,ini css dasar'a),lalu copas juga HTML dan Jquery'a:

CSS

#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden;
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBT01Jdff_mIjUfnre_9dCMjfAlmW6vk5iNevjZB_8Ay0SB4YAInt-0si_7xWgkj5n4O8jnbd2hSCCNHp7yXoSWqBPH7B_hnyzDYf1OymMFM3y6Fse_U4jK-i-8K9reCOr8lQNyUc2EE0/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

.bgslide {background:#000;width: 722px;
border-radius: 15px;}


HTML
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>



Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>

saya agak malas reupload js'a~xD
bila merasa hosting'a terasa agak lelet,tinggal download dan re-upload js'a di sites.google.com

#note
-letakan CSS di atas kode ]]></b:skin>
-letakan HTML didalam/dibawah kode <body>
-letakan jquery diatas kode </head>




selesai deh,jelas sekali bukan?nanti tampilan'a menjadi seperti ini


contoh diatas,agak berbeda dengan yang aslinya di
http://css-tricks.com/examples/SlideToUnlock/

http://sword-art-online-blogger-template.blogspot.com/



kenapa?trik yang asli tidak melayang dan tidak fullscreen.

sedangkan yang sudah saya modifikasi melayang,dan fullscreen.

kenapa agak beda dengan blog saya? jangan samalah,kalian bisa memodif'a sendiri dengan kreasi kalian sendiri... ^^

selamat mencoba dan belajar~xDD
semoga trik ini cukup bermanfaat,dan tolong jangan cuma asal copas postingan saya dan mengaku".Dosa tau :p
yosh,saya off lagi,sampai jumpa di waktu liburan ~xD
sankyu all~ *OFF








Rabu, 22 Agustus 2012

Membuat Background menarik dengan CSS3

Membuat Background menarik dengan CSS3
Trik kali ini membuat background gradient dengan CSS3,saya dapat dari lea.verou.me.karena sangat menarik,maka saya share aja cara memasang gradient ini pada background.sebenarnya buka cuma buat background blog kita aja,tapi
bisa juga untuk sidebar,footer,header dll trgantung kamu mau'a pasang dimana.

okeh,pertama kamu buka blogger=> rancangan=>edit HTML,kemudian pilih salah satu css/style dibawah ini.

-Style 1-
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

-Style 2-
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

-Style 3-
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -ms-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));

-Style 4-
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

-Style 5-
background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

-Style 6-
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(45deg, transparent 75%, #555 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);

-Style 7-
background: #fdc;
background: -moz-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));
-webkit-background-size: 100px;
-moz-background-size: 100px;

-Style 8- #ini yang sedang saya gunakan (warna hijau kuning pada browser google chrome(webkit),dan akan berubah warna menjadi biru pada browser mozilla(moz)
background: -moz-radial-gradient(center, ellipse cover, #314584 1%, #1C273D 74%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#314584), color-stop(74%,#1C273D));
background: -webkit-radial-gradient(center, ellipse cover, #DBD8AC 1%,#2D585F 74%);


Update 23-08-2012!!!!


-Style 9-
background:-webkit-radial-gradient(0% 50%, circle , rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
-webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background-size: 20px 20px;
background:
-webkit-radial-gradient(0% 50%, circle , rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
-webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;





-Style 10-
background:
-webkit-linear-gradient(27deg, #999 23%, transparent 23%) 7px 0,
-webkit-linear-gradient(27deg, transparent 74%, #999 78%),
-webkit-linear-gradient(27deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background:
-webkit-linear-gradient(27deg, #999 23%, transparent 23%) 7px 0,
-webkit-linear-gradient(27deg, transparent 74%, #999 78%),
-webkit-linear-gradient(27deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background-size: 16px 48px;
background:
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #999 78%),
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;



-Style 11-
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);


-Style 12-
background:
-webkit-linear-gradient(-45deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-135deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-225deg, #ECEDDC 25%, transparent 25%),
-webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background:
-webkit-linear-gradient(-45deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-135deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-225deg, #ECEDDC 25%, transparent 25%),
-webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);



-Style 13-
background:
-webkit-linear-gradient(-45deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
-webkit-linear-gradient(-135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background:
-webkit-linear-gradient(-45deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
-webkit-linear-gradient(-135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px;
background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;




-Style 14-

background:
-webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background:
-webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);




-Style 15-

background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;


-Style 16-
background:
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%),
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background:
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%),
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;
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;




-Style 17-
background-color:#556;
background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);



-Style 18-
background-color: hsl(34, 53%, 82%);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-size: 100%;

-Style 19-
background-color: #fff;
background-image:
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-image:
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;




-Style 20-
background-color:#269;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;



Kalau sudah copy ke bagian yang kamu inginkan


#Untuk Newbie yang belum mengerti,berikut cara'a.
Contoh pada background
Misal kan


body{
---;
---;
Isi CSS;
---;
---;
}

Kamu masukan salah satu style menjadi seperti ini

body{

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

}

atau yang menggunakan div style,contoh:

html

<div class='style1'></div>

CSS


.style1 {

isi css..

}



Intinya kamu css diantara { isi css }


#untuk mengatur besar background gradient,tambahkan css dibawah ini

-webkit-background-size: 100px;
-moz-background-size: 100px;



#Note:Untuk mengganti warna,yang perlu kamu lakukan tinggal mengganti warna hexadecimal atau Rgba color tergantung jenis'a.
Untuk tips memilih warna kamu bisa lihat di SINI


Kalau sudah,simpan dan lihat hasilnya
bila masih ada yang tidak dimengerti,silakan tanyakan saja~xDD
Arigatou Gozaimasu.