Salah satu trend webdesain adalah mempercantik halaman background web dengan pola. Pola ini bisa berupa garis,ukiran, titik atau kombinasinya. Jika anda ingin tahu contoh website yang menggunakan pola background ini adalah buntu.com dan http://www.Codeacademy.com. Nah intinya kita ingin membuat website seperti itu.

Kelebihan teknik ini ukuran filenya sangat kecil dibanding dengan menggunakan background image full wallpaper. Teknik ini juga sering disebut CSS sprite. Agar anda tidak kebingungan mencari pola background yang menarik, silahkan kunjungi http://subtlepatterns.com.

Tutorial ini adalah kelanjutan dari tutorial sebelumnya yang membahas tentang typografi web dengan Googlewebfont.Saya akan mengajarkan membuat background pola dengan dua cara yaitu cara statis dan cara dynamis.

Cara statis

Untuk cara ini berikut adalah langkah langkahnya

  1. Buka http://subtlepatterns.com
  2. Pilih pola yang cocok lalu download
  3. extract file pola (format png) kedalam folder background.

tambahkan CSS ke header Halaman

body{
background: url('background/namapola.png') repeat
}

Mengganti background secara dynamis

Anggaplah kita ingin membuat website seperti twitter. Pengguna twitter bebas mengganti halaman latar dengan pola background yang telah disediakan. Nah, kita juga bisa kok membuat yang mirip dengan twitter. Dalam contoh ini, ceritanya kita hanya menyediakan 3 pola background yaitu grey, noisy dan shattered. 3 file ini harus anda download dulu di http://subtlepatterns.com.

1. Buat tiga tombol link untuk masing masing backround.

<h3>Change Background</h3>
<a href='index.php?bg=grey' class='btn btn-primary '>Grey</a>
<a href='index.php?bg=grid' class='btn btn-success '>Noisy </a>
<a href='index.php?bg=shattered' class='btn btn-danger '>Shattered</a>

3. Buat fungsi PHP untuk mengubah background

function set_background($bg) {
if(!empty($bg)) {
	echo &quot;background: url('background/$bg.png') repeat;
	} else {
	echo &quot;background: url('background/shattered.png') repeat;
	}
}

Inti dari kode diatas adalah gunakan pola yang terpilih, jika tidak ada yang dipilih gunakan pola default yaitu shattered.png.

4. panggil fungsi didalam code CSS seperti ini

if(isset($_GET[bg])){
	$_SESSION['bg']=$_GET['bg'];
}
set_background($_SESSION['bg']);

Tampilan dari halaman

Demo webfont

Demo Background dengan pola (CSS Sprite)

Source code & Demo

Silahkan lihat DEMOnya DISINI. download source codenya sendiri disini. Bagi anda yang sudah mendownload source code tutorial typografi web dengan Googlewebfont tidak perlu lagi mendownload karena code pada tutorial ini sudah menjadi satu dengan tutorial tersebut.

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:         

3 thoughts on “Membuat Pola Background website ala Twitter Profile

  • 7 February , 2013 at 3:36 am
    Permalink

    Saya baru install online dari google, versi 24.0.1312.57
    Ini tak bikinin previewnya, http://i45.tinypic.com/2zthls9.jpg
    Memang belum lama kok kaya gini, skitar tanggal 3 February kmarin kalo ga salah..

    Reply
  • 5 February , 2013 at 2:43 pm
    Permalink

    ga tuh…kamu pake versi berapa chromenya? aq tiap kali update dan preview artikel selalu pake chrome..saya pakai chrome terbaru 25. saya pake chrome lama juga ok2 aja tuh

    Reply
  • 5 February , 2013 at 2:31 pm
    Permalink

    Mas, home page template ini kalo di load di chrome akan berantakan. Saya juga pake ini, mau benerin kok ga tau CSS, coba disharing caranya mas. Terimakasih

    Reply

Tinggalin komentar dong!