Advertise

Background Stripers And pattern Dengan CSS3 No Image

Selamat sore Brader Blogger semua akhirnya kembali membuat postingan walaupun sekarang jarang update tapi alhamdulilah disisa waktu luang ini akhirnya bs kembali update. Untuk sekarang saya akan share seputar tutorial CSS3 yang lama juga tidak ada info yang baru. Apalagi bang Hendro sesepuh CSS3 juga udah jarang ngebahas CSS3 hehehe.... gimana ni bang Hendro kabarnya kayanya lg asyik dengan koding-koding di weblognya.

background pattern full css3 tanpa image
Langsung saja pada pokok pembahasan. tutorial CSS3 kali ini akan membahas pembuatan background dengan texture/pattern full CSS3 seperti gambar diatas, dimana semua itu dilakukan menggunakan koding CSS3 tanpa image.

Untuk Demo livenya bisa lihat pada link di bawah.

Demo Live

Dan untuk codingnya dibawah.

Angled Pattern
.angled {
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: -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: -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);
}


Horizontal Pattern
.horizontal {
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: -moz-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);
}

Vertical Pattern

.vertical {
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: -moz-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);
}

Checkered Pattern
.checkered {
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: -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: -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%);
}

Diatas hanya beberapa saja background pattern dengan css3 silahkan Anda berekplorasi lagi. Selamat mencoba.

14 komentar:

  1. Ow, jadi gag pake background url image ya sob, cuma main kode css aja. Wah bagus juga. Tapi terlalu banyak kode css seperti di atas bsa mempengaruhi loading blog kok sob. Apakah ada solusi alternatif utk meminimalisir atau mengconvertlah kode2 tsb agar kodenya bsa lebih sedkit? Maaf sebelumnya ya, hanya sekedar masukan saja niich :D

    BalasHapus
  2. heeeeh buka judulnya keburu ngeres. kirain gambar striptis. hahah

    BalasHapus
  3. malam.
    aku suka yang kotak-kotak itu mas
    kayak papan catur saja modelnya

    BalasHapus
  4. makasih ya bos, mengingatkan saya utk blajar CSS hehehe

    BalasHapus
  5. #1st pertamax he..
    kode warnanya pake rgb ya bos???

    BalasHapus
  6. ini bukan stripers kaya di Surabaya Undercover itu ya...?? ;p

    BalasHapus
  7. siang maz...
    yang warna kotak tetap aku suka kayak anyaman bambu

    BalasHapus
  8. mantap gan infonya
    terima kasih ya

    BalasHapus
  9. dapet masukan yang bermanfaat kawan
    terima kasih ya

    BalasHapus
  10. Makin berwarna blognya yang terpasang pattern ini sahabat.

    BalasHapus
  11. wah banyak juga yh codenya, mungkin bisa saya test di blog tester saya kalau terlihat keren langsung tak pasang di blog utama

    BalasHapus
  12. wah , kereen . ,

    thanks infonya

    BalasHapus
  13. solusinya gimana ya sob kpada template yang ku pakai selalu menemukan error sampai 65 (CSS level 2.1) validasi. terutama css_bundle.css dari blogger /external css .

    BalasHapus