Tutorial Web Design

Pattern adalah gambar yang sama dan muncul berulang-ulang dan biasanya digunakan sebagai background. Bisa untuk background website, poster, dan lainnya.   Disini kita akan mencoba membuat pattern dinding semen dengan photoshop (Seamless Concrete Pattern Photoshop) Sebelum mulai, siapkan gambar yang akan dijadikan pattern. Di sini akan digunakan gambar dari : http://www.flickr.com/photos/tendolab/2624600725/sizes/l/in/photostream/ Kenapa tidak menggunakan gambar…

Membuat website landing page dengan scroll perhalaman dengan menggunakan jquery akan kita bahas pada tutorial kali ini. Model website yang akan dibuat ini bisa digunakan untuk website company profile, tinggal disesuaikan dengan kebutuhan, Desain website di demo ini mungkin akan kelihatan seperti website dengan tema flat design, karena warna yang digunakan memang mirip dengan warna-warna…

Jquery bukan hal asing lagi ditelinga kita, jquery datang dengan banyak efek untuk website kita dan hampir menggantikan flash yang dulu juga di gunakan agar website kita terasa hidup dengan efek yang bisa kita ciptakan. Seiring banyaknya peminat jquery banyak juga developer yang mengembangkan dan membuat framework jquery sendiri, seperti JqueryUI, JqueryTools, Kendo UI dan…

Kita sudah melewati 2 tahap awal, Basic Transformation dan 2D Transformation. Sekarang kita berada di bagian paling menarik dari transformation, Transformasi 3D di CSS3. Sebelum masuk ke dalam properties apa saja yang bisa kita mainkan nanti, ada sedkit notes; Di tulisan ini saya menulisakan bentuk standard prefix -webkit. Untuk prefix yang lain tidak saya sertakan di…

Artikel ini akan membahas CSS3 2D Transformation, merupakan lanjutan artikel sebelumnya dengan judul Mengenal Transformasi di CSS3. Continue from our last catch up tentang basic css transformation. Sekarang kita akan bahas properti transformasi 2D dengan css3. Tujuannya untuk dapat merubah baik posisi, bentuk, dan sifat suatu elemen dalam bidang 2 dimensi. Seperti yang sudah kita…

CSS3 memberikan banyak pilihan bagi developer untuk menggali lebih dalam & mengeksplor imajinasi kita. Sama halnya dengan style properties yang akan kita bahas sekarang, transformation. Trans.. what? Transformation, atau transformasi dalam bahasa Indonesia, yaitu css properties yang berfungsi merubah rupa (bentuk & sifat) HTML element dalam bidang 2 dimensi atau 3 dimensi. Transformasi sering digunakan…

Sudah baca mengenal konsep dasar flexbox ? Kalau belum, kamu bisa mencari tau apa itu flexbox di berbagai sumber. Bantuan Google sangatlah disarankan. Kamu juga bisa membaca disini untuk penjelasan konsep flexbox secara general. Untuk tutorial pertama flexbox kita akan membuat navigation bar menggunakan flexbox. Buat markup sederhana merepresentasikan relasi parent (elemen ul dengan class…

Tutorial ini akan membahas Cara Membuat Grid Layout Sederhana Menggunakan LESS, pada dasarnya LESS itu extensi pada css yang sangat dinamis dilakukan, biasa disebut css preprocessor,  LESS juga bisa membuat sebuah variable, mixins, operasi dan fungsi seperti halnya ekstensi lainnya seperti Sass. Kelebihan dari LESS dibandigkan Sass, di LESS kita hanya perlu memakai less.js saja…

Cara Migrasi dari Twitter Bootstrap versi 2 ke Twitter Bootstrap versi 3 ternyata tidak semudah biasanya, di versi 3 ini sangat banyak perubahan dan bahkan harus merubah secara menyeluruh untuk menyesuaikan aturan-aturan penulisan kode di versi 3. Seperti kita ketahui, Twitter Bootstrap baru saja memperkenalkan Twitter Bootstrap 3 RC 1, versi ini belumlah versi final,…

Mungkin memunculkan jendela Pop Up atau Overlay hanya bisa dilakukan oleh javascript saja. Tapi dengan semakin pesatnya kehebatan CSS, kita bisa membuat jendela Pop Up sederhana. Bagaimana Caranya? Check it out. Pertama dan yang paling utama sudah pasti membuat markup html nya dulu lah. Tanpa adanya file html, mana mungkin bisa dibuat. Setelah itu simpan…