Membuat Background menarik dengan CSS3

Membuat Background menarik dengan CSS3
Trik kali ini membuat background gradient dengan CSS3,saya dapat dari lea.verou.me.karena sangat menarik,maka saya share aja cara memasang gradient ini pada background.sebenarnya buka cuma buat background blog kita aja,tapi
bisa juga untuk sidebar,footer,header dll trgantung kamu mau'a pasang dimana.

okeh,pertama kamu buka blogger=> rancangan=>edit HTML,kemudian pilih salah satu css/style dibawah ini.

-Style 1-
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);

-Style 2-
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);

-Style 3-
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -ms-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));

-Style 4-
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);

-Style 5-
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);

-Style 6-
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%);

-Style 7-
background: #fdc;
background: -moz-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));
-webkit-background-size: 100px;
-moz-background-size: 100px;

-Style 8- #ini yang sedang saya gunakan (warna hijau kuning pada browser google chrome(webkit),dan akan berubah warna menjadi biru pada browser mozilla(moz)
background: -moz-radial-gradient(center, ellipse cover, #314584 1%, #1C273D 74%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#314584), color-stop(74%,#1C273D));
background: -webkit-radial-gradient(center, ellipse cover, #DBD8AC 1%,#2D585F 74%);


Update 23-08-2012!!!!


-Style 9-
background:-webkit-radial-gradient(0% 50%, circle , rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
-webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background-size: 20px 20px;
background:
-webkit-radial-gradient(0% 50%, circle , rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
-webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;





-Style 10-
background:
-webkit-linear-gradient(27deg, #999 23%, transparent 23%) 7px 0,
-webkit-linear-gradient(27deg, transparent 74%, #999 78%),
-webkit-linear-gradient(27deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background:
-webkit-linear-gradient(27deg, #999 23%, transparent 23%) 7px 0,
-webkit-linear-gradient(27deg, transparent 74%, #999 78%),
-webkit-linear-gradient(27deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background-size: 16px 48px;
background:
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #999 78%),
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;



-Style 11-
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);


-Style 12-
background:
-webkit-linear-gradient(-45deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-135deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-225deg, #ECEDDC 25%, transparent 25%),
-webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background:
-webkit-linear-gradient(-45deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-135deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(-225deg, #ECEDDC 25%, transparent 25%),
-webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);



-Style 13-
background:
-webkit-linear-gradient(-45deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
-webkit-linear-gradient(-135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background:
-webkit-linear-gradient(-45deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
-webkit-linear-gradient(-135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px;
background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;




-Style 14-

background:
-webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background:
-webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);




-Style 15-

background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;


-Style 16-
background:
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%),
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background:
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%),
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%),
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%),
-webkit-radial-gradient(60% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 43%, circle closest-side , #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
-webkit-radial-gradient(40% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(60% 22%, circle closest-side , #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
-webkit-radial-gradient(50% 35%, circle closest-side , #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;
background:
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;




-Style 17-
background-color:#556;
background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
-webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);



-Style 18-
background-color: hsl(34, 53%, 82%);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
background-size: 100%;

-Style 19-
background-color: #fff;
background-image:
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-image:
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;




-Style 20-
background-color:#269;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;



Kalau sudah copy ke bagian yang kamu inginkan


#Untuk Newbie yang belum mengerti,berikut cara'a.
Contoh pada background
Misal kan


body{
---;
---;
Isi CSS;
---;
---;
}

Kamu masukan salah satu style menjadi seperti ini

body{

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);

}

atau yang menggunakan div style,contoh:

html

<div class='style1'></div>

CSS


.style1 {

isi css..

}



Intinya kamu css diantara { isi css }


#untuk mengatur besar background gradient,tambahkan css dibawah ini

-webkit-background-size: 100px;
-moz-background-size: 100px;



#Note:Untuk mengganti warna,yang perlu kamu lakukan tinggal mengganti warna hexadecimal atau Rgba color tergantung jenis'a.
Untuk tips memilih warna kamu bisa lihat di SINI


Kalau sudah,simpan dan lihat hasilnya
bila masih ada yang tidak dimengerti,silakan tanyakan saja~xDD
Arigatou Gozaimasu.

Komentar

  1. Anjiiirr.. XD
    Keren bgt, aku mau coba tuh yang diagonal...
    Eh, comment dikit, yg warna merah ama putih warna sample nya diganti aja deh Nes, jadi mirip taplak meja XD

    Aku coba yang ungu ya :3

    Arigatou... Gomawo.. :3

    BalasHapus
  2. eh sorry, maksudku yang biru, bukan ungu..
    *haduh....

    BalasHapus
  3. pengen nyoba
    kalo space blog saya kosong
    atao template blogazine saya udah jadi
    XD

    BalasHapus
  4. @Dark Ard.ywes terserah~ :)
    @REFARDO monggo" silakan dicoba~xDD

    BalasHapus
  5. keren-keren tapi ane lebih suka yg radial hohoho

    BalasHapus
  6. dulu pernah make tuh ane yg warna biru hehehe asek bgt :D

    BalasHapus
  7. hoo,pada seneng radial ya?==" ok deh saya update posting ini yg radial

    BalasHapus
  8. hooh udah bosen liat linear terus xixixi

    BalasHapus
  9. wew keyen...
    tapi ane kurang ngerti yg bginian XP

    BalasHapus
  10. Masih Bingung sangat sob -.- mau ku pakai yang style 6 tapi kok waktu ku pakai. warnanya item putih. Padahal pinginnya kayak contoh di atas -.-

    BalasHapus
  11. bro kalau untuk web ko gk bisa ya seperti contoh,garis2 kaya tirai, pas saya coba hasilnya cuma setengah layar aja

    body{
    background: #fdc;
    background: -moz-linear-gradient(0deg, #fed 20px, #fdc 20px);
    background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));

    -webkit-background-size: 100px;
    -moz-background-size: 100px;
    }

    BalasHapus
    Balasan
    1. Sama nih ane juga cuma setengah, jadi kebagi dua warna doang
      solusinya gimana bang jo?

      Hapus
  12. klo website saya kurang tau sob,saya belum pernah coba.tpi klo blog saya coba bisa kq n_n

    BalasHapus
  13. kak , itu kan kadang ada yg kegedean , bahkan yg kaya taplak meja itu malah jadi aneh XD coba pake kode background-size makinn mantab dah hahaha thx kak berguna banget ilmunya :D

    BalasHapus
  14. Tanya mas? Saya sudah coba di blog WordPress yang di localhost. Tapi kok hasilnya beda dengan contoh diatas yah?

    Mohon bimbingannya secara privat, hehehe...
    Btw. fb, twitter, atau email mas apa? Biar saya bisa tanya-tanya :D

    BalasHapus
  15. wordpress sih seharusnya bisa.tapi saya kurang tau juga,coz saya blum pernah coba di wordpress.
    link fb saya ada di blog ini,menu yang dipaling bawah.

    BalasHapus
  16. Wah aq sukak yang jenis catur mas, hehehehe ditunggu kunjungannya ya?

    BalasHapus
  17. @Coporation bisa kq.tp sbeum'a update browser kamu ke versi terbaru dlu :)

    BalasHapus
  18. pak masih bingung kalo pengen ganti warna -_- kalo diisi pake hex bisa engga sih? atau harus pake RGB?

    BalasHapus
  19. keren... ternyata bisa buat BG pake css.... >,<

    BalasHapus
  20. Wow.., keren , Mantap Deh..., Thanks banget...

    BalasHapus
  21. kayaknya beberapa cod- nya ada yang salah...., coba cek di firefox....
    contoh -Style 14- , webkit-nya nya dobel tapi moz-nya gak ada ???

    BalasHapus
    Balasan
    1. iya,moz'a ga ada ==v

      copy paste aja yg webkit'a,diganti jd -moz

      Hapus
  22. agan saya mau nanya. biar koment image,nya sama gitu semua gimana..

    BalasHapus
  23. bro ane pasang bg style 13 di template SAO, tulisan di post jd gk kliatan. gmn tuh?? :D
    http://agha.agcholic.com

    BalasHapus
    Balasan
    1. cari style yang lain,klo ga sesuain warna background'a supaya ga nyaru

      Hapus
  24. cba bukaknya d google chrome kk,
    krna kn bg style 13 ada bacaan -webkit
    itu artinya style nya mendukung d chrome kk, klo d mozilla gk,
    klo ada kode -moz itu artinya mendukung / berfungsi d mozilla,

    aku jga pakek bg style yg disini d postingan ku :)

    BalasHapus
    Balasan
    1. iya,css yg aq post diatas emang ga ada css buat mozilla,copy paste aja,truz depanya -webkit diganti jdi -moz

      Hapus
    2. ini ngejawab pertanyaanku ya?? :D

      ini juga pke chrome adek... XD
      pensiun dari mozila dek... XD

      Hapus
  25. Naruhnya DImana Nih??

    Bingung Saya :o

    BalasHapus
  26. naruhnya di body { -isi code css- } save dah

    BalasHapus
  27. Gan saya pakai template kamu,,..terus saya mau ganti backgrounnya kok ggak bisa yah??

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template