Skip navigation


Sedikit sharing tentang desain HTML. Gw beberapa hari ini lagi bikin theme wordpress buat website kantor meski pada dasarnya gw gak jago desain. Meski demikian, gw lumayan bisa kalo layout HTML dan CSS. Oke, sering kita ngeliat pada halaman web sering ada sebuah halaman yang memiliki bingkai gradasi atau pola-pola menarik. Di CSS yang sekarang kita gak bisa set bingkai (border) sebuah elemen menjadi sebuah gradasi atau pola. Tapi kita bisa menyiasatinya.

Layout HTML yang dipakai adalah sebagai berikut

<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

Selanjutnya kita sediakan sebuah gambar berukuran 920*2 pixel. Sebenarnya ukurannya lebarnya bisa terserah berkisar antara 900 s.d. 800an pixel dan tingginya hanya 1 s.d. 3 pixel. Di kedua pinggirnya kita siapkan pola atau gradasi. Contoh dapat dilihat di sini.

Nah, setelah itu kita tinggal bermain-main CSS.

body {margin:0px;padding:0px;background:#aaffb0;}
#page_wrapper {width:920px;background:url(page-border.png) repeat-y;margin:auto;}
#header {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}
#content {width:860px;margin:0px 30px 0px 30px;height:400px;border:1px solid #00ff12;background:#ffffff;}
#footer {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}

Page wrapper adalah sebuah elemen yang menampilkan gambar background di atas dan membungkus elemen-elemen utama : header, content, dan footer. Pada gambar yang disertakan, ukuran gradasi adalah 30px masing-masing. Oleh karena itu ukuran lebar header harusnya 60px lebih kecil dari  page wrapper dan harus memiliki margin 30px di kedua sisi kanan dan kiri. Margin ini akan memberi tempat bagi bingkai tersebut agar dapat terlihat.

Hasilnya nanti seperti di bawah.

Kode dapat diunduh di sini.

(seperti biasa, rename extension ke *.zip)

One Comment

  1. Saya pilih posting ini, saya tautkan posting ini dalam comment blog saya di Memahami Arsitektur Magento Commerce. Ping bakal dikirim nggak lama lagi🙂


2 Trackbacks/Pingbacks

  1. By Twitted by petrabarus on 15 Agu 2009 at 3:10 pm

    […] This post was Twitted by petrabarus […]

  2. […] E-commerce (2) » E-commerce (1) » Bingkai Gradasi pada Halaman HTML ( BALAS […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: