Background Pattern Dengan Css

Assalamualaikum. Setelah Beberapa Hari Ini Saya Post tentang SEO. Dan Kali ini saya akan postingkan yang saya beri judul "Cara Membuat Background Pattern dengan CSS". Trick Ini Cukup Mudah. Hanya Penelitian CSS aja. Dan Mungkin Banyak Yang tahu Background Pattern Banyak Menggunakan Gambar dan kali ini saya akan mempostingkan dengan CSS.Langsung aja Yah Sob.

Microbial Mat Pattern Css

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;

background-size: 20px 20px;

Stairs Pattern Css

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;

background-size: 16px 48px;

Half-Rombes Pattern Css

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

Arrows Pattern Css

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; 

Zig-Zag Pattern Css

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%); 

background-size: 100px 100px;

background-color: #EC173A;

Weave Pattern Css

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;

background-color:#708090;

background-size: 64px 128px

Carbon Pattern Css

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);

background-color: #131313;

background-size: 20px 20px;

Carbon Fibre Pattern Css

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;

background-color:#282828;

background-size:16px 16px;

Cara Memasang Background Pattern di Blog

- Login ke Blogger

- Pergi ke Template

- Pilih Edit HTML

- Cari Kode Body { lalu Ganti Kode Background:blablabla dengan kode css diatas

Keuntungan Memakai Background Pattern dengan CSS

Keuntunganya adalah mudah merubah warnanya. Dan nggak berat

Sekian Dari Saya Semoga Bermanfaat..
Jika ingin Request tentang Background lainya silahkan Komentar di blog ini..
Insya Allah Saya dapat membantu..

Tweet

Ditulis Oleh: Unknown di 6:33 AM