CSS Playground Content is Good - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title CSS Playground Content is Good, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article Coded, Article CSS, Article Informasi, Article Web, we write this you can understand. Well, happy reading.

Title : CSS Playground Content is Good
link : CSS Playground Content is Good

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/

Thus articles CSS Playground Content is Good

that is all articles CSS Playground Content is Good This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article CSS Playground Content is Good with the link address https://autopostingblogspot.blogspot.com/2012/06/css-playground-content-is-good.html