MENGGANTI BACKGROUND dengan mudah

Kamis, 30 Mei 2013

MENGGANTI BACKGROUND dengan mudah

Cara mengganti background menggunakan gradien backround pure css3. Rasanya saya sudah lama tidak memposting tentang tutorial css, pada akhir-akhir bulan ini saya fokus terhadap artikel tentang optimasi SEO dan saat ini saya akan memberikan informasi kepada para pembaca untuk mempelajari tentang css gradien background.

gradien background

Pada tutorial kali ini kita hanya akan menggunakan dan mengotak-atik di bagian script css saja dan tidak menggunakan gambar background. Penggunaan latar background yang tidak mencantumkan element gambar memiliki loading page yang lebih cepat daripada yang memakai background image. Ini disebabkan karena halaman tersebut langsung dimuat tanpa harus menunggu loading gambar terlebih dahulu.

Lalu seperti apakah gradien background itu? gradien background adalah penggunaan background yang memuat dua warna, tiga warna atau bahkan bisa lebih. Perpindahan antara warna satu dengan yang lainnya tidak langsung berganti secara frontal, akan tetapi berganti secara perlahan sampai menemui warna kedua atau warna selanjutnya. Mungkin paling enak dan mudah dimengerti, sobat bisa lihat saja langsung gambar dibawah ini

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.