Cara Membuat Gradien Background

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-----------------------------------------------------------------------

Contohnya : Beh ! Povia mbotomo ...

gradien background

Nah dengan menggunakan kode css kita bisa membuat background blog seperti itu tanpa harus menggunakan gambar atau image. Kode cssnya adalah sebagai berikut:

background: linear-gradient(left, white 20%, #8b0 80%);

Sobat bisa mengganti element-element pada kode background tersebut:
warna merah : arah gradiasi (top,left,right,bottom)
warna orange: pilihan warna (bisa menggunakan kata atau kode warna #XXXXXX)
warna hijau : prosentase kombinasi warna (efek tidak akan terlihat bila kedua nilai ini memiliki value yang sama)

Contoh penggunaan prosentase yang sama tidak, akan menghasilkan efek gradiasi pada background tersebut.

background: linear-gradient(left, white 50%, #8b0 50%);

gradien dengan prosentase yang sama

MODIFIKASI GRADIEN BACKGROUND PURE CSS3

Sekarang kita masuk pada tahap selanjutnya yaitu penggunaan background-size untuk bisa memodifikasi tampilan latar blog sehingga terkesan lebih unik.
Lihatlah contoh penggunaan css background-size dibawah ini:

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

Hasil tampilan dari penerapan kode css diatas akan menghasilkan beberapa buah kotak-kotak dengan ukuran 100px kali 100px, kombinasi dua warna masing-masing 50%.

background size

Mau tampilan yang lebih keren lagi? mari kita kreasikan vertical strip diatas dengan memadukan fungsi rotate sehingga tampilannya menjadi miring-miring. Untuk ini perlu ada penambahan prosentase warna lagi agar tampilannya perfect.

background miring

background: linear-gradient(45deg, white 25%, #8b0 25%, #8b0 50%, white 50%, white 75%, #8b0 75%, #8b0);
background-size:100px 100px;

BACKGROUND CSS3 PATTERNS GALLERY

Ada lagi bermacam-macam background unik yang bisa kamu gunakan seperti pada gambar dibawah ini

css3 patterns gallery

Langkah cara pemasangannya sebagai berikut:
1. Masuk ke http://lea.verou.me/css3patterns/# kemudian pilih salah satu dari warna latar belakang yang ingin sobat pakai.
2. Copy semua kode css kemudian masuk menu Template > Edit HTML > paste kode tersebut di dalam kurung kurawal  .body {}. hapus kode css background bawaan awal kemudian Save Template. Jangan lupa untuk selalu membackup template agar aman.

kode css

۞ الحمد لله ربّ العٰلمين ۞

-----------------------------------------------------------------------