Membuat (background) website dengan gradasi warna

Posted on September 2, 2010 by inwahyu — Tinggalkan komentar

Membuat latar belakang (background) website dengan gradasi warna

Pernahkah anda mencoba menyimpan sebuah file HTML di internet kemudian ternyata setelah dibuka, file hasil simpanan tadi tidak seperti yang anda lihat seperti pada saat connect di internet???.

Sebenanya bila kita ingin mengetahui rahasia dari sebuah website, salah satu caranya adalah dengan melihat source code dari website tersebut. Bila anda pernah menemukan sebuah website atau Blog kemudian menyimpan file tersebut meskipun file asli dan hasil simpanan dalam html, namun tetap saja ada object atau tampilan yang hilang maka sebenarnya file tersebut menggunakan tehnik koneksi CSS. Maksudnya file html tersebut menggunakan script CSS yang digunakan secara terpisah dari file html anda. Untuk lebih jelas mengenai CSS anda dapat membaca di artikel saya yang lain yaitu Website Mudah dengan CSS.

Penyebab object dan tampilan dari file yang anda simpan tidak seperti file pada saat di load di tempat aslinya misalnya di internet adalah karena anda tidak ikut mengikutkan file CSS yang di attach dari file html tersebut (bila file aslinya dari html). Namun hal yang sama juga akan terjadi bahkan yang tampil hanya berupa script code dari suatu halaman html adalah karena file asli dari halaman web yang anda simpan berupa file server seperti asp, php dan lain-lain. Lebih lengkap baca artikel saya yang lain yaitu file-file yang tidak terlihat saat dicopy.

Sekarang kita masuk ke pokok permasalahan kita yaitu mungkin anda pernah melihat suatu tampilan web atau blog yang berlatar belakang gradasi. Seperti website ini halamannya berlatar belakang gradasi biru. Ternyata cara buatnya cukup gampang dan tidak terlalu banyak menulis script. Anda mau tahu caranya???

Caranya adalah : dengan menggunakan sub-tag background pada tag body. Ini adalah cara yang sederhana, namun bila anda ingin menyembunyikan background pada saat disimpan silahkan gunakan CSS. Agar lebih jelas mari kita praktekkan saja.

Silahkan buat gambar gradasi misalnya biru dengan putih dengan bentuk vertikal (biru diatas semakin kebawah berwarna semakin putih. Tidak usah terlalu lebar misalnya lebarnya 5 pixel dan panjangnya 400 px. Kemudian simpan file tersebut dan letakkan pada suatu folder simpan misalnya namanya folderku. Dan nama file nya background-01.jpg
Kemudian buat sebuah file html tentusaja lengkap dengan elemen head dan body. Misalnya seperti berikut : <html> <head></head><body></body></html>
Pada tag body <body> tuliskan script berikut:

Nah coba simpan file tersebut dengan nama terserah namun berekstensi html dan diletakkan pada folder yang sama dengan folder gambar yang kita gunakan untuk background tadi.
Perlu diketahui kita menggunakan warna #FFFFFF yang artinya putih karena semakin kebawah gradasinya berwarna putih dan bila menggunakan warna lain silahkan menggunakan warna yang dimaksud.
Dan kita menggunakan sub tag background-repeat: repeat-x adalah karena lebar gambar kita tadi cuma 5 pixels sedangkan file html kita seharusnya ditampilkan dilayar misalnya berukuran 800 X 600 pixels. Maka gambar kita akan diulang tampilnya mengikuti sumbu x jadi secara horizontal. Sehingga menutupi layar.

Bagaimana??? sudah puas??? sudah terlihat kan background anda berwarna gradasi, nah kalau anda ingin mengamankan hasil karya anda ini. Silahkan anda membuat file CSS yaitu pada tag body tadi dibiarkan biasa namun kita attach dengan file CSS lain yang berisi skrip seperti diatas. Untuk lebih jelasnya demikian:

Tag body yang ada di html kita biarkan seperti biasa yaitu: <body>

namun kita buat file css yang berisi script :

body {
background-color: #FFFFFF;
background-image: url(images/background_01.jpg);
background-repeat: repeat-x;
}

Simpan file css anda ini dengan extensi css misalnya : gaya.css dan letakkan di folder yang sama dengan file html dan file gambar yang kita buat tadi.

kita edit kembali file html dengan tambahan script yang menghubungkan html dengan css yang baru kita buat. Seperti berikut ini:

Silahkan kembangkan kreativitas anda sendiri. Untuk menjadi lebih baik dari kemarin.