Download PES 2012

Hari ini saya akan update Datapack 4.0 untuk PES 2012 serta Patch buat update versi PES 2012 kamu. Sesuai dengan sahabat jusushare yang sudah request di email saya.

Bagi yang sudah request, silahkan di cek ya.

Datapack dan patch ini berfungsi mengupdate PES kita secara offline, tanpa harus mengupdatenya langsung dari gamenya



Kalau yang belum tahu datapack dan Patch PES 2012 ini dia tampilannya:

Ini yang PESEDIT



PES EURO edition









Download :
Pro.Evolution.Soccer.2012.Patch.v1.06-RELOADED
PES 2012 DLC 4.00



Note : Datapack yang sudah di download, selanjutnya dicopy ke C: // ProgramData / Konami / Pro Evolution Soccer 2012 / download



Semoga Bermanfaat ..

^^

Loreng Ingus 11111

Baru sempet update nih teman, soalnya lagi sibuk 2 hari ini . hehe. Langsung kepikiran, mau posting apaan yaa, mending tema angry bird yang ada dilaptopku ini aja yang saya posting.

Semua sudah tahu kan angry bird itu apa ?, itu tuh game kecil tapi seru untuk dimainkan . hehe.. Ternyata ada skin packnya juga lho buat windows 7. Langsung aja, mending posting Skin Pack Angry Bird Space saja deh .

Dengan skin pack ini, sobat dapat mempercantik tampilan windows 7 kamu supaya nggak bosen mandangin laptop.
Banyak sekali perubahan yang di berikan dalam skin pack ini, Mulai dari Cursor, Taskbar, Loading Sistem, dan masih banyak lagi yang lainnya yang bertemakan Angry Bird Space

Ini dia Screen Shotnya :

Pengen Mencobanya ?, Download saja temanya dibawah ini.

•  Skin Pack Angry Bird Space [32bit]
• Skin Pack Angry Bird Space  [64bit]

password : leptopgue

link uploader
Semoga Bermanfaat.

^^

Loreng Ingsung

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

sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Membuat Background menarik dengan CSS3 http://djogzs.blogspot.com/#ixzz25Ci9Qxs6
Under Creative Commons License: Attribution

Coba Coba Coba XD

Hai sobat~saya mau share ilmu CSS lagi nih,tapi tingkat menengah.jadi yang ingin belajar,coba dan usaha dulu sebelum bertanya.tadinya sih saya mau share css yang paling dasar dulu,tapi males karena ga sempet(im sorry=_=v) jelasin'a karena banyak sekali,dan mungkin akan jadi buku.wkwkwkw.kali ini tentang CSS Pseudo - elements?apa itu?CSS pseudo-elemen adalah CSS yang digunakan untuk menambahkan efek khusus pada beberapa seleksi element yang kita inginkan tanpa harus menambahan html.css ini sebenar'a sudah umum dan banyak digunakan web designer yang sering kita lihat sekarang banyak yang ahli menggunakan CSS3 hingga terlihat artisitik.saya juga sudah lama menggunakan ini sih,baru sekarang saya share,karenalagi ada waktu luang~jadi bagi yang ingin belajar,silakan dibaca dari awal :)



Contoh template yang saya terapkan menggunakan trik ini yaitu:

1. Haiyore nyaruko-san
2. Sora no otoshimono
3. Shinobu oshino
4. Green minimalist
5. Fairy tail
6. blog saya sendiri :)

Dan beberapa trik seperti cloud animation,text animation,ribbon menu css3,dll



bagaimana cara menerapkanya?
Mudah saja,yang perlu kita lakukan adalah membuat/mengetik CSS'a sendiri secara manual dengan 4 CSS Pseudo yang akan saya bahas yaitu.

1. :First-line
2. :First-letter
3. :before
4. :after

Saya akan jelaskan satu - persatu,tapi untuk awal penerapanya menggunakan Sintaks dari pseudo-elemen seperti dibawah ini.


.namacss/class:pseudo-elemen

keterangan:
.nama css/class adalah nama css yang terkait dengan Html.
pseudo-element= fungsi yang kita inginkan(:before atau :after atau :first-line atau :first-letter)



Contoh:

Misalkan saya punya HTML dengan nama class

<div class='header'>isi content </div>

lalu nama cssnya

.header {isi css;}


setelah itu saya ingin menambahkan css pseudo :after,maka menjadi

.header:after {isi css;}

#note:
-bukan diganti/tapi ditambahkan!
-Sintask bisa berupa awalan .'titik' atau # 'pagar'
tergantung dari HTML yang akan digunakan ID atau class.
ID = div id
class= div class

mengenai ID dan class,bisa baca di blog teman saya Z-ept.blogspot.com










:First-line
CSS ini berfungsi untuk menambah style khusus untuk baris pertama pada teks.
Bila sobat perhatikan contoh dibawah ini,Baris pertama pada text berwana merah dan text huruf besar semua.kenapa?karena pada css p.css1:first-line saya tambahkan css color:#ff0000 (warna merah) dan small caps(huruf kapital).tapi tidak hanya sebatas itu,kita juga bisa saja memasukan background,text shadow,font-size ataupun border didalam css :first-line,tapi hanya untuk baris pertama penerapanya.tergantung kemauan dan kreatifitas kamu :)

Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css1:first-line
{
color:#ff0000;
font-variant:small-caps;
}

HTML

<p class='css1'>Isi text</p>

:first-letter
Seperti nama'a sendiri,Surat/Kata pertama,fungsinya untuk membuat Drop-cap text atau membuat Style pada Huruf pertama di suatu paragraf.CSS inilah yang seringkali digunakan untuk keperluan Tipografi yang bergaya Magazine.

Coba sobat perhatikan contoh dibawah ini,Pada huruf pertama 'L' kenapa text'a berwarna merah dan ukuran text'a besar?
sama sperti tadi,hanya saja saya menambahkan font-size:50px agar ukuran text lebih besar.dan inti'a css:first letter hanya berlaku untuk huruf pertama dalam 1 paragraf.

Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css2:first-letter
{
color:#ff0000;
font-size:50px;
}

HTML

<p class='css2'>Isi text</p>

Untuk Contoh lainya kamu bisa lihat langsung di template terbaru saya :
-sora no otoshimono
-shinobu oshinom
-green minimalist
-fairy tail.







:First-line dan:first-letter
Jika ingin menggabungkan 2 fungsi,kamu tinggal memasukan nama css yang sama agar berfungsi pada suatu paragraf tersebut.
Maka hasilnya bisa dilihat pada contoh dibawah ini.


Contoh:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS

p.css3:first-letter
{
color:#ff0000;
font-size:50px;
}
p.css3:first-line
{
color:#ff0000;
font-variant:small-caps;
}

HTML

<p class='css3'>Isi text</p>

:before
CSS ini fungsinya digunakan untuk memasukkan beberapa konten CSS sebelum konten dari elemen utama.
CSS ini pula sekarang sedang pupuler dikalangan web designer yang tergila" dengan CSS3 karena fungsinya untuk menambahkan elemen CSS yang terpisah dengan elemen pertama,jadi penggunakan css ini tidak perlu menambahkan kode html baru,cukup menyamakan nama css dengan nama html yang sudah ada.untuk lebih jelasnya ,pertama saya ambil contoh kotak untuk elemen pertama dari 30 trik menarik yang sudah saya posting sebelumnya.


Dibawah ini adalah css kotak biasa.

Kotak

HTML

<div class='kotak1'>kotak</p>

CSS

.kotak1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Tapi setelah saya menambahkan css .kotak1:before

CSS

.kotak1:before
{
content:"";
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:
#00C4FD;
width: 80px;
height: 80px;
text-align: center;
position: absolute;
margin-left: 145px;
border: 7px solid
white;
margin-top: -25px;
}

Hasilnya menjadi seperti dibawah ini.

Kotak

kenapa bisa ada lingkaran di sebelah kotaknya? itu karena saya menambahkan beberapa lagi css pada .kotak1:before dengan panjang dan lebar 80 px,border radius,dan border/garis pinggir sebesar 7px.

#Note: menambahkan .kotak1:before{ bukan berati mengganti/menimpa css .kotak1{ (css utama)
#kalau CSS utama tidak ada,maka CSS .kotak:before tidak akan muncul.

dan kenapa di CSS itu saya menambahkan position absolute?karena jika tidak elemen css'a akan berada didalam kotak tersebut,jadi css position:absolute lah yang berfungsi agar elemen pseudo :before posisinya menjadi tidak terpaku/tergantung lagi pada css.kotak1(element utama)untuk posisinya bisa menggunakan margin atau dengan css posisi top,bottom,left,right.

jika saya tidak menggunakan posisi absolute,maka hasilnya akan menjadi seperti dibawah ini:

Kotak

Element css pseudo :before akan fix didalam elemen kotak tesebut.






:after
CSS ini fungsinya sama saja dengan :before,fungsinya digunakan untuk memasukkan beberapa konten CSS setelah konten dari elemen utama.

Teorinya,kalau yang :before posisinya ada diatas elemen utama,sedangkan posisi :after ada dibawah elemen utama.

Urutan:
1. :before
2. main element
3. :after


CSS

namacss:after {

:before dan :after
Lalu apakah kedua fungsi css ini bisa digunakan bersamaan pada suatu element?tentu saja bisa,yang perlu kamu lakukan hanya menyamakan class name html yang akan dijadikan element utama.

Misalkan tadi saya mempunyai kotak 1

Kotak

Lalu saya tambahkan css .kotak1:after dan hasilnya menjadi seperti dibawah ini:

Kotak

menggunakan css pseudo after dan before bukan hanya sekedar buat element bulat dan kotak loh?selai kita bisa menambahkan border dan background,kita juga dapa menggantinya dengan gambar,cara'a menambahkan url pada background,dan sesuaikan dengan ukurannya.dan juga apakah sobat perhatikan template" saya seperti green minimlist dan fairy tail?kenapa pada posting style'a bisa seperti itu?rahasianya saya menggunakan css ini dengan menambahkan Segitiga diatas posting,dan mengatur'a sehinggan terliaht unik.segitiga'a darimana? ada di postingan saya 30 trik menarik css 3



Nah,segini dulu tutorial dasar" CSS tingkat menengah dari saya~
semoga bermanfaat,dan saya harapkan anda jangan cuma baca,copy paste lalu dicoba,tapi pahami fungsi"nya! agar mudah dipahami oleh diri kalian sendiri,dan tidak tergantung pada saya truz nanya ini itu.Selamat belajar :)

sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Trik CSS Pseudo-elements http://djogzs.blogspot.com/#ixzz256oefpDY
Under Creative Commons License: Attribution