CSS Playground Content is Good

Tampilan sederhana, pada halaman home page hanya menampilkan 4 buah link kategori (CSS, HTML, JS and SVG) langsung tertuju pada tujuan. Tapi berbicara konten yang ada disana, mungkin dia seorang master ;)) @bdc account twitter si pemilik. Pasti pada penasaran yah oo siapa dia :-" Karena gue tau cuma CSS, ya sharing bagian itu saja :d
Koben baru melihat kode-kode snippet CSS yg aneh² dari sana bos. Ternyata rumusan² untuk variabel CSS3 masih menjadi sebuah misteri yg harus dipelajari lebih mendalam! Yaaa jujur saja gue mah males belajar, kan sudah ada developer and master :P dan fungsi si bloglang anu ganteng kalem tea berbagi pada kalian :) Kalianlah yg mesti belajar...OKAY! Let's go kita mulai acara petualangan dimulai dari yg sederhana membuat background tablecloth textured! Sederhana dari hongkong!!! namanya saja sudah macam gitu =))
Full 100% used CSS3

Kode CSS

{
background:
-webkit-gradient(
linear, 0 0, 100% 60%,
from(transparent),
to(rgba(220,40,30,.4)),
color-stop(.1, rgba(220,40,30,.1)),
color-stop(.15, rgba(220,40,30,.3)),
color-stop(.3, rgba(220,40,30,.1)),
color-stop(.35, rgba(220,40,30,.2)),
color-stop(.4, rgba(220,40,30,.2)),
color-stop(.45, rgba(220,40,30,.3)),
color-stop(.5, rgba(220,40,30,.1)),
color-stop(.7, rgba(220,40,30,.2)),
color-stop(.75, rgba(220,40,30,.3)),
color-stop(.95, rgba(220,40,30,.1))
),
-webkit-gradient(
linear, 0 100%, 100% 0,
from(rgba(220,40,30,.5)),
to(transparent),
color-stop(.25, rgba(220,40,30,.5)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(220,40,30,.5)),
color-stop(.75, rgba(220,40,30,.5)),
color-stop(.75, transparent)
),
-webkit-gradient(
linear, 0 0, 100% 100%,
from(rgba(220,40,30,.3)),
to(transparent),
color-stop(.25, rgba(220,40,30,.3)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(220,40,30,.3)),
color-stop(.75, rgba(220,40,30,.3)),
color-stop(.75, transparent)
);
background:
-moz-linear-gradient(
-40deg,
transparent,
rgba(220,40,30,.1) 10%,
rgba(220,40,30,.3) 15%,
rgba(220,40,30,.1) 30%,
rgba(220,40,30,.2) 35%,
rgba(220,40,30,.2) 40%,
rgba(220,40,30,.3) 45%,
rgba(220,40,30,.1) 50%,
rgba(220,40,30,.2) 70%,
rgba(220,40,30,.3) 75%,
rgba(220,40,30,.1) 95%,
rgba(220,40,30,.4) 100%
),
-moz-linear-gradient(
45deg,
rgba(220,40,30,.5),
rgba(220,40,30,.5) 25%,
transparent 25%,
transparent 50%,
rgba(220,40,30,.5) 50%,
rgba(220,40,30,.5) 75%,
transparent 75%,
transparent 100%
),
-moz-linear-gradient(
-45deg,
rgba(220,40,30,.3),
rgba(220,40,30,.3) 25%,
transparent 25%,
transparent 50%,
rgba(220,40,30,.3) 50%,
rgba(220,40,30,.3) 75%,
transparent 75%,
transparent 100%
);
background-size:6px 8px,
100px 100px,
100px 100px;
}

#aw {
#stripes : [
{
color: '#ffb4d5',
rotation: 45,
opacity: 80,
mode: 'normal',
width: 30,
gap: 10,
offset: 0
},
{
color: '#3a83d6',
rotation: 200,
opacity: 50,
mode: 'plaid',
width: 10,
gap: 10,
offset: 0
}
],
bg : '#ffffff'
}

Sebelum lanjut, Koben ingatkan kembali bila kita membicarakan tentang fitur CSS3 harus sudah support browsingan kita. Males dengan kode² diatas, try it Patternizer Karena kode-kode yg ada pada setiap browse itu berbeda :) Makanya pada web sumber terdapat demo enggak berjalan mulus karena tidak mengikutsertakan kode pada browsingan lain ;)) Pada yg berikut ini, pada web sumber pakek mozilla tidak jalan nih :p animated text background!

Beben Koben si Bloglang anu Ganteng Kalem Tea

Kodenya

#bg_jalan {
text-align: center;
font: 700 1.4em helvetica, sans-serif;
background: url(YOUR-BACKGROUND.jpg);
width: 100%;
height: 94px;
color: #eee;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slide 55s linear infinite;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation: slide 55s linear infinite;
}
@-webkit-keyframes slide {
0% { background-position: 0 0; opacity:0; }
5% { background-position: 2% 2%; opacity:1; }
99% { background-position: 99% 99%; }
100% { background-position: 100% 100%; opacity:0; }
}
@-moz-keyframes slide {
0% { background-position: 0 0; opacity:0; }
5% { background-position: 2% 2%; opacity:1; }
99% { background-position: 99% 99%; }
100% { background-position: 100% 100%; opacity:0; }
}

Markup HTML<div id="bg_jalan"> </div>Silahkan sobat melihat-lihat yg lain di CSS playground SYSTEM OF BLOG seneng dapat ide postingan nih ;))
Happy blogging \m/