Rabu, September 04, 2013

Ahirnya Bisa ngepost lagi karna lagi sibuk ama urusan sekolah dan redesign blog hehe Oke, disini saya mau berbagi tentang Background Manis dengan CSS3 yang sy temukan dari Underground 404 . Dan sayapun suka hehe xD. Caranya mudah bro, tinggal cari kode CSS body{ atau body {, cari didalam kurung kurawa background hapus satu baris kode background tsb dan rubah dgn kode dibawah.

#1

#2

#3

#4

#5

#6

Background CSS3 #1 :

-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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); background-image:-ms-linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:-o-linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent);

Background CSS3 #2 :

  -webkit-background-size:50px 50px;
  -moz-background-size:50px 50px;
  background-size:50px 50px; /* Controls the size of the stripes */
  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);
  background-image:-ms-linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent);
  background-image:-o-linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent);
  background-image:linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent);

Background CSS3 #3 :

-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ background-color:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -moz-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -webkit-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -o-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -ms-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);

Background CSS3 #4 :

  -webkit-background-size:50px 50px;
  -moz-background-size:50px 50px;
  background-size:50px 50px; /* Controls the size of the stripes */
  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);
  background-image:-ms-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:-o-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: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 CSS3 #5 :

 -webkit-background-size:50px 50px;
  -moz-background-size:50px 50px;
  background-size:50px 50px; /* Controls the size of the stripes */
  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);
  background-image:-ms-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:-o-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: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 CSS3 #6 :

 -webkit-background-size:50px 50px;
  -moz-background-size:50px 50px;
  background-size:50px 50px; /* Controls the size of the stripes */
  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%);
  background-image:-ms-linear-gradient(45deg,#555 25%,transparent 25%,transparent),-ms-linear-gradient(-45deg,#555 25%,transparent 25%,transparent),-ms-linear-gradient(45deg,transparent 75%,#555 75%),-ms-linear-gradient(-45deg,transparent 75%,#555 75%);
  background-image:-o-linear-gradient(45deg,#555 25%,transparent 25%,transparent),-o-linear-gradient(-45deg,#555 25%,transparent 25%,transparent),-o-linear-gradient(45deg,transparent 75%,#555 75%),-o-linear-gradient(-45deg,transparent 75%,#555 75%);
  background-image:linear-gradient(45deg,#555 25%,transparent 25%,transparent),linear-gradient(-45deg,#555 25%,transparent 25%,transparent),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);

Semoga postingan saya tentang background css3 ini bermanfaat dan menjadikan blogku mengenang dan membekas di hati agan, sekian wassalam. Alhamdulillah :)

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

8 Komentar

HapusBalas

UnknownRabu, 04 September 2013 pukul 15.03.00 WITA Permalink

Keren yang nomor 6 Sob :)

Haekal FikriRabu, 04 September 2013 pukul 15.13.00 WITA Permalink

Iya Sob Hehe :-d :)

Imron FhatoniRabu, 04 September 2013 pukul 17.56.00 WITA Permalink

memang manis gan :-d

AnonimRabu, 04 September 2013 pukul 18.51.00 WITA Permalink

kkirain pk gambar,heehe ane cb sob y?? terimakasih.

Haekal FikriKamis, 05 September 2013 pukul 14.53.00 WITA Permalink

Iya Gan Hehe :D

Silahkan Sob :-d :)

SunandarSenin, 09 September 2013 pukul 13.06.00 WITA Permalink

keren nih gan..

Haekal FikriSenin, 09 September 2013 pukul 17.05.00 WITA Permalink

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag  KODE PANJANG ANDA 
Untuk menyisipkan gambar, gunakan tag  URL GAMBAR 
Untuk menyisipkan Judul, gunakan tag  JUDUL ANDA DI SINI... 
Untuk menciptakan efek tebal gunakan tag  TEKS ANDA DI SINI... 
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI... 

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
$:\$ $\o/$ Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif