Menggunakan Google Web Fonts

By Haqqi in Information Technology 1 Comment

Sekedar tips dan trick desain web..

Beberapa waktu yang lalu, saya dapat komen dari @nengbiker tentang tulisan di blog saya ini yang katanya bikin mata pusing. Yah, sebenarnya saya sudah sadar sejak lama sih, cuma malas oprek-oprek blog lagi kalau sudah jadi gini. Hehe.. Lagian theme ini latar belakangnya pakai file gambar, yang artinya, ngubah satu ya ngubah semua. Siyal.

Akhirnya saya pikir mending ganti font aja deh, yang lebih enak dibaca. Arial yang saya pakai sebelumnya memang font kadaluwarsa, yang bikin mata jadi bosen baca. Akhirnya, saya pikir-pikir mending pakai @font-face CSS3 aja biar font-nya lebih bagus.
Continue reading

Dialog Konfirmasi dengan jQuery

By Haqqi in Information Technology 3 Comments

Repost dari artikel saya di PC Mild 01/2011

jQuery sangat memudahkan proses pembuatan tampilan website yang interaktif. Berkat kemampuannya yang telah dikemas secara kompak, programmer web bisa memanfaatkannya tanpa harus mengerti bagaimana proses yang terjadi.

Salah satu contoh penggunaannya adalah membuat dialog konfirmasi dalam halaman web. Walaupun sebenarnya cukup dengan menggunakan fungsi prompt() pada javacript, namun tampilannya kurang menarik dan bergantung dari browser yang dipakai. Dalam artikel ini akan dijelaskan trik membuat dialog konfirmasi dengan jQuery.
Continue reading

Teknik Membuat Latar Belakang 1 Halaman Penuh

By Haqqi in Information Technology 24 Comments

Repost dari artikel saya di PC Mild 20/2010

Anda pasti pernah menemukan website dengan latar belakang berupa gambar satu halaman penuh. Salah satu contoh website tersebut adalah http://ringvemedia.com. Kendala yang muncul adalah bagaimana menempatkan gambar tersebut agar bisa selalu tepat meskipun jendela browser di-resize.

Halaman penuh

Ada beberapa langkah yang bisa dilakukan untuk dapat membuat full page background. Konsepnya adalah sebagai berikut.
Continue reading

Membuat Icon Mengambang di Samping

By Haqqi in Information Technology 17 Comments

Repost dari artikel saya di PC Mild 20/2010

Kombinasi antara javascript dengan CSS mampu menghasilkan tampilan website yang semakin menarik. Salah satunya adalah membuat tombol atau icon yang mengambang di bagian samping website, seperti pada http://mashable.com dan http://erikvandeven.com.

Tampilan floating button pada mashable.com

Kunci utama dari pembuatan tersebut terletak pada property CSS yang digunakan beserta struktur dokumen html-nya. Agar tombol (button) yang semula terletak tetap dapat ikut bergeser ke bawah seiring berjalannya scroll vertical pada browser, maka harus ditambahkan sedikit pemrograman javascript di dalamnya. Untuk lebih mudahnya, pada tutorial ini akan menggunakan library javascript yang sudah cukup terkenal dan banyak digunakan, yaitu jQuery. Untuk mendapatkan library ini, dapat didownload pada website resminya http://jquery.com.
Continue reading

Membuat Button Elegan dengan CSS3

By Haqqi in Information Technology 7 Comments

Repost dari artikel saya di PC Mild 19/2010

CSS adalah sebuah bahasa scripting untuk membuat style atau tampilan dari sebuah halaman html. Saat ini CSS telah semakin berkembang, dengan versi terbarunya adalah CSS3.

Perkembangan CSS ini bahkan mampu menggantikan fungsi gambar (image) dalam pembuatan desain website, memberikan fleksibilitas lebih, namun dengan sesedikit mungkin file yang terlibat. Tombol lingkaran dan gradasi (rounded and gradient button) dengan desain elegan yang dulunya memerlukan peran image sebagai pembentuknya, saat ini dapat dibuat hanya dengan menggunakan CSS, seperti contoh di bawah ini.

Contoh button dengan CSS3

Untuk membuat button tersebut, ada beberapa css property yang digunakan. -webkit-gradient dan -moz-linear-gradient akan menampilkan gradasi warna pada button. Berikutnya, property border-radius dan -moz-border-radius akan membuat bagian pojok button menjadi bulat. Masih banyak property lain yang sangat berguna dalam mebuat desain yang fantastis.
Continue reading