Ahirnya Bisa ngepost lagi karna lagi sibuk ama urusan sekolah dan redesign blog hehe Oke, disini saya mau berbagi tentang Background Manis dengan CSS3 yang sy temukan dari Underground 404 . Dan sayapun suka hehe xD. Caranya mudah bro, tinggal cari kode CSS
body{
atau body {
, cari didalam kurung kurawa background
hapus satu baris kode background
tsb dan rubah dgn kode dibawah.#1
#2
#3
#4
#5
#6
Background CSS3 #1 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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); background-image:-ms-linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:-o-linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent);
Background CSS3 #2 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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); background-image:-ms-linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:-o-linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent); background-image:linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent);
Background CSS3 #3 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ background-color:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -moz-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -webkit-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -o-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-image: -ms-linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
Background CSS3 #4 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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); background-image:-ms-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:-o-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: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 CSS3 #5 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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); background-image:-ms-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:-o-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: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 CSS3 #6 :
-webkit-background-size:50px 50px; -moz-background-size:50px 50px; background-size:50px 50px; /* Controls the size of the stripes */ 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%); background-image:-ms-linear-gradient(45deg,#555 25%,transparent 25%,transparent),-ms-linear-gradient(-45deg,#555 25%,transparent 25%,transparent),-ms-linear-gradient(45deg,transparent 75%,#555 75%),-ms-linear-gradient(-45deg,transparent 75%,#555 75%); background-image:-o-linear-gradient(45deg,#555 25%,transparent 25%,transparent),-o-linear-gradient(-45deg,#555 25%,transparent 25%,transparent),-o-linear-gradient(45deg,transparent 75%,#555 75%),-o-linear-gradient(-45deg,transparent 75%,#555 75%); background-image:linear-gradient(45deg,#555 25%,transparent 25%,transparent),linear-gradient(-45deg,#555 25%,transparent 25%,transparent),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);
Semoga postingan saya tentang background css3 ini bermanfaat dan menjadikan blogku mengenang dan membekas di hati agan, sekian wassalam. Alhamdulillah :)
8 Komentar