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.

Read More

CSS3Ps - Convert Objek di Photoshop menjadi CSS3

Hai sobat,Mau tau bagaimana caranya Costum shape/verktor yang kita buat di photoshop yang kita buat,di Convert menjadi CSS3? ini dia CSS3ps.


CSS3Ps adalah web/ sebuah cloud berbasis plugin photoshop yang dapat memproses sebuah layer dari photoshop menjadi CSS3. kita dapat memilih beberapa layer dan group layer dan mengkonversi objek pada layer tersebut. Apa saja yang dapat di convert?

---

-Color overlay
-Stroke/border
-Inner Shadow
-Inner Glow
-Drop Shadow
-Outer Glow
-Gradient Overlay
-Border-radius
-Box-size
-Multi layer

---

(sejauh yang saya coba hanya itu yang berfungsi)
menggunakan gambar,text dan efek menggunakan pattern/pola tidak akan berfungsi saat kita konversi.

hanya sebatas itukah? ya karena sayapun baru mencoba,yang pasti berhasil adalah vektor yang menggunakan pen tool dan costum shape,jika kita coba menggunakan brush, pencil,text atau objek gambar yang ukuran'a tidak pasti(tidak beraturan),maka akan gagal dan yang css keluar hanya tinggi dan lebar(height and width).fail =__=v

Untuk costum shape,masih ada syaratnya,yaitu bentuk beraturan dan masih masuk akal oleh css3.
Misalkan saya buat sebuah objek bintang dan segilima,setelah saya konversi menjadi css3 hasilnya malah menjadi percegi panjang.jadi intinya hanya objek yang ukuranya beraturan dan dapat dihitung oleh script yang dibuat oleh CSS3ps.

Untuk hasilnya support pada semua browser yang mendukung CSS3 serta mendukung pada Windows atau Mac OS X dan Photoshop CS3,CS4,CS5 dan CS6.

Dan perlu saya beritahu,menggunakan plugin ini GRATIS dan memerlukan Koneksi Internet untuk mengconvertnya pada photoshop CS3 dan CS4,sedangkan untuk versi CS5 dan CS6 saya kurang tahu dia sifat'a online,atau langsung di photoshop'a.


Penasaran bagaimana cara menggunakan Plugin ini?

kamu bisa langsung lihat tutorial'a disini
Atau mengikuti petunjuk dari saya dibawah ini.

---

Karena saya sendiri masih menggunakan CS4,jadi saya buat tutorial untuk versi CS3 dan CS4 saja.

Pertama,sobat Download plugin'a sesuai dengan versi photoshop yang kamu punya.

Download untuk Adobe Photoshop CS5 and CS6
Download untuk Adobe Photoshop CS3 and CS4


Kalau sudah,segera buka photoshop,buat sebuah layer dengan ukuran apa saja,lalu buatlah sebuah objek menggunakan costum shape (bebas,mau 1,2,3 atau lebih)

Setelah itu tambahkan Style pada objek tersebut(drop shadow,border,gradient,dll)

kalau sudah, klik menu "

File -> Scripts -> Browse...

Setelah itu Pilih File yang tadi kita download,lalu klik Load

Setelah itu akan otomatis membuka default browser kamu,dan menunggu prosesnya selama 20 detik

Dan untuk hasilnya bisa kamu lihat seperti gambar dibawah ini.sudah ada preview kode CSS3 lengkap serta bentuk objeknya.

Pada hasil contoh dibawah pada objek yang bewarna hijau,semula saya buat bentuk segilima,tapi hasilnya menjadi persegi panjang TTATT.#fail

Selesai deh,mudah bukan?


Kalau menurut saya plugin ini hanya media alternatif /mirip CSS3 generator untuk membantu kita dalam membuat style,bukan membuat bentuk" aneh/sulit sesuka kita,tapi bedanya disini kita menggunakan Photoshop,jadi yang memang sudah terbisasa menggunakan photoshop,pastinya lebih mudah untuk membuat style CSS3 yang kita inginkan.

Sekian trik dari saya,semoga bermanfaat,terima kasih :)

Read More

Sword Art Online Blogger Template

Apa kabar sobat? akhirnya selesai juga template Sword art online.Template kali ini tema'a dengan warna dasar hitam dan abu".desain'a saya buat simple dengan 2 sidebar,2 kolom footer dan style post sederhana.awalnya sedikit kesulitan cari gambar header dan footer yang bagus,trus nemu material gambar di google dan di minitokyo.com,edit sendiri,croping sendiri,ngerender sendiri =___="


template ini berasal dari template blog saya Djogzs.blogspot.com tapi dengan design berbeda. Alasan saya sharing template ini karena banyak request yang ingin template dengan model post seperti di blog saya dan juga mencegah orang berbuat nekat jiplak template saya, karena saya sendiri bingung,kenapa tiap saya ganti template, ada saja yang ngikutin warna,bentuk template bahkan sampai isi posting,widget blog sama 100%.apakah istemewanya blog saya? pdahal sama saja dengan template blogger yang lain.yang ngejiplak ituloh yang buat saya jadi males ngeblog lagi,mending berhenti aja dah,tapi karena sekarang lagi liburan saya lanjutin deh =_____="

Tapi yweslas,saya lagi ikut puasa juga,ga bisa marah atau bertindak,males ngurusin bocah ,so dimohon untuk menghilangkan kebiasan buruk menjiplak,dan juga jangan terprofokasi dengan grup" yang selalu ada masalah,karena itu saya tidak mau ikut campur urusan grup ini grup itu.

I Just wanna free~ n_n

kembali ke templatenya,pasti pada taukan anime sword art online? lagi hot nih anime~
tokoh favorite saya yang pasti kirito dan asuna *.*

yang msh penasaran,bisa lihat previewnya dibawah ini

Preview

Pengaturan menu

Buka blogger=> Template =>Edit HTML lalu cari kode HTML seperti dibawah ini :

---

<div class='navijohanes'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About me</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Articles</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Inspiration</a></li>
</ul>
</div>

Kemudian Ganti tanda pagar '#' dengan Url link yang kamu inginkan dan ganti juga nama linknya.



Tertarik menggunakan template Sword Art online?
Check this Out~

---

Download via google drive

Download via Dropbox

Demo

---

Arigatou gozaimasu minna-san~ n_n
Untuk sebelum dan sesudahnya,saya mengucapkan selamat Lebaran dan Merdeka!!!! xDD
Dan bijaklah menggunakan template Gratis!!~


Note:

Saya tidak mau bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Read More

Mirai Suenaga Blogger Template

Hello sobat,sudah jarang sekali saya ngurusin blog,karena msh banyak tugas kuliah yg belum terselesaikan,dan juga banyak urusan pribadi (nonton anime),kali ini template yang saya buat yaitu Mirai suenaga.



Siapa itu Mirai? Mirai adalah maskot situs karakter untuk kebudayaan Jepang oleh Dannychoo Seorang blogger ternama di Jepang (dannychoo.com).Sudah ada banyak projek Mirai yang berkolaborasi dengan perusahaan Jepang seperti Good Smile Company, Cospa, Nitro Plus, Kadokawa, King Records dan masih banyak lagi.Karena karakternya yang moe,lucu,serba orange dan disukai banyak orang,banyak produk" Merchandise yang dibuat dengan karakter Mirai-chan.

Nah,untuk template yang saya buat dengan lebar 1245px ini menggunakan warna dasar orange,dan gambar maskot mirai-chan pada header dan footer.kenapa saya buat lebar sekali? sebenarnya lebarnya hampir sama dengan blog saja kq (djogzs),cuma bedanya pada bagian posting saya buat lebar,jadi cocok buat yang suka posting komik,foto" dan lainya.
menurut saya sudah jarang yang menggunakan monitor/ resolusi ukuran 800p x600px.
mungkin minimal ukuran standart pada laptop/pc sekarang antara 1024px x 768px - 1280px x 768px.so,kalau terlalu besar bisa di zoom out.untuk versi kecilnya akan saya buat lagi nanti =____=v


Selain itu,Template ini teinspirasi dari website www.dannychoo.com karena design'a yang serba orange,simple tapi bersih.karena itu template yang saya buat ,menggunakan warna dasar orange jugs ,serta style posting'a mirip dengan dannychoo,tetapi bukan berarti mirip 100% dan bukan hasil copy paste karena saya bukan plagiat=___=v,kalau plagiat,ga mungkin bilang dapetnya darimana xD.


Coba kamu perhatikan perbedaan'a seperti gambar dibawah ini,style post yang ada di template saya menggunakan CSS3 pada masking gradientnya dan ada hover efek'a,sedangkan pada dannycho tidak ada dan hanya menggunakan gambar png pada efek gradient'a.

kenapa saya menjelaskan hal ini?hal ini dimaksudkan agar kita tidak terbiasa copy paste css web orang lain,jadi buatlah sendiri css'a,~

-Screenshot-

Pengaturan menu

---

Buka blogger=>templates=>edit HTML

setelah itu cari HTML seperti dibawah ini.

<div id='nav'>
<ul>
<li class='home'><a href='#'>HOME</a></li>
<li>//<a href='#'>ABOUT ME</a></li>
<li>//<a href='#'>ANIME</a></li>
<li>//<a href='#'>PROJECT</a></li>
<li>//<a href='#'>CONTACT</a></li>
<li>//<a href='#'>SITEMAP</a></li>
<li>//<a href='#'>GUESTBOOK</a></li>
<li>//<a href='#'>RECRUITMENT</a></li>
</ul>

lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan.





bagi yang masih penasaran,silakan dilihat demo'a~ :)

Download via google drive

Download via Dropbox

Demo

Arigatou gozaimasu minna-san and spesial thx to dannychoo, im waiting you on AFA 2012~ ^^
Selamat mencoba,semoga bermanfaat :)

Oia,saya ingatkan,kerusakan karena pengeditan/penambahan konten pada template bukan tanggung jawab saya.bila ingin redesign,ingat peraturanya,gunakan template ini dengan bijak,thx

cara download:

next template: Sword Art Online

Read More