NEWS
Loading...
  • Posted by : Johanes Djogan 23 Agt 2012

    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.

    { 48 comments... read them below or Comment }

    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 di body { -isi code css- } save dah

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

      BalasHapus

    "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"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -