Membuat Background menarik dengan CSS

Kali ini saya post tentang background menaik dengan CSS setelah terinspirasi dari kakak johanes , mau tau caranya ? yo ikutin turtorialnya sekaligus lihat stylenya :

Style 1

{
stripes : [
    {
        color: '#092537',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 79,
        gap: 281,
        offset: 284
    },
    {
        color: '#092637',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 9,
        gap: 351,
        offset: 149
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 135,
        gap: 225,
        offset: 95
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 56,
        gap: 331,
        offset: 327
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 315,
        offset: 140
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 36,
        gap: 324,
        offset: 320
    }
],
bg : '#ffffff'
}

Style 2

{
stripes : [
    {
        color: '#bfbac2',
        rotation: 335,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#bfbac2',
        rotation: 25,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#3e122c',
        rotation: 25,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    },
    {
        color: '#3e122c',
        rotation: 335,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    }
],
bg : '#d1d1b6'
}

Style 3

{
stripes : [
    {
        color: '#ff0800',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 45,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 4

 {
stripes : [
    {
        color: '#055067',
        rotation: 291,
        opacity: 75,
        mode: 'normal',
        width: 50,
        gap: 40,
        offset: 0
    },
    {
        color: '#3ab1d6',
        rotation: 228,
        opacity: 47,
        mode: 'normal',
        width: 76,
        gap: 60,
        offset: 26
    },
    {
        color: '#ffb4e2',
        rotation: 143,
        opacity: 80,
        mode: 'normal',
        width: 30,
        gap: 10,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 5

background: #36c;
background:
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 15px 30px

Style 6

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);
background-color:#e1ebbd;
background-size: 128px 128px;

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;