Our Blog


Back to Blog

Background Photo

Hari ini website Dewi Sandra yang baru online. Ini adalah versi ke-3nya. Idenya sih sederhana, dan langsung kepikiran begitu melihat foto-foto stock album Dewi yang baru. Keren-keren banget. Emang DS kalau difoto pasti bagus.

1_500

Dari sini kita ingin memaksimalkan penggunaan foto-foto yang banyak. Supaya image DS sangat bisa terlihat dengan menonjol di website. Akhirnya kita memutuskan untuk menggunakan setiap stock foto yang ada sebagai background image. Tidak tanggung-tanggung, full browser screen.

Website ini enggak ada white area, alias area batas terluar website. Semuanya margin 0 dan liquid. Jadi dimensinya akan mengikuti sesuai dengan ukuran window browser yang digunakan.

Sebagai navigasinya adalah bar hitam yang berisi menu dan beberapa buttons lainnya yang selalu ada di tiap halaman.

Z-Index dan Transparent & Fixed BG

Permainan z-index dan alpha di CSS juga bisa membuat gimmick yang seru. Jadi setiap box seperti header bar, content body, new window dsbnya bisa dibuat seakan2 barada di tumpukan antara satu dan yang lainnya.

2_500

Seperti contoh digambar ini ketika di scroll, blog columnya akan berada di bawah navigation bar dengan background foto besarnya tetap berada di tempat. Bar ini dibuat semi transparent untuk menambah kesan berada paling atas dalam tumpukan.

Multibox

Penggunaan multibox adalah sebagai pengganti pop up untuk content module yang lepas. Dalam hal ini adalah shoutbox, rbt list, social network links dan view image gallery. Ini dimaksudkan untuk memudahkan navigasi, jadi dalam setiap page bisa terbuka setiap modul yang diinginkan tanpa harus lari ke page lain.

3_500

Box untuk sponsor di paling kiri bawah juga ditaruh di layer paling atas supaya dalam setiap keadaan selalu terlihat dengan jelas. Begitu uga untuk navigation barnya. Dengan adanya overlay hitam untuk mengalihkan fokus untuk point-point penting yang sedang aktiv di website ini.

Leave a Reply