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.

Komentar

Blog doodey mengatakan…
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
Rawins mengatakan…
heeeeh buka judulnya keburu ngeres. kirain gambar striptis. hahah
Sungai Awan mengatakan…
malam.
aku suka yang kotak-kotak itu mas
kayak papan catur saja modelnya
nurrahman mengatakan…
makasih ya bos, mengingatkan saya utk blajar CSS hehehe
Anonim mengatakan…
#1st pertamax he..
kode warnanya pake rgb ya bos???
Unknown mengatakan…
ini bukan stripers kaya di Surabaya Undercover itu ya...?? ;p
Sungai Awan mengatakan…
siang maz...
yang warna kotak tetap aku suka kayak anyaman bambu
Tutorial Blog mengatakan…
mantap gan infonya
terima kasih ya
Tip Trik Tip mengatakan…
dapet masukan yang bermanfaat kawan
terima kasih ya
Suparyanto mengatakan…
Makin berwarna blognya yang terpasang pattern ini sahabat.
Rizkyzone mengatakan…
wah banyak juga yh codenya, mungkin bisa saya test di blog tester saya kalau terlihat keren langsung tak pasang di blog utama
Ladida Cafe mengatakan…
wah , kereen . ,

thanks infonya
Anonim mengatakan…
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 .
t mengatakan…
makasih makasih :D

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text