Belajar CSS Layout

Cara Membuat Layout Masonry Dengan CSS3

masonry css only

Biasanya untuk membuat sebuah layout seperti pinterest.com kita menggunakan plugin dari desandro yaitu plugin jQuery masonry.

Mengenal Transformasi di CSS3

Contoh sederhana transfomasi CSS3

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…

Tutorial Flexbox CSS3 Basic

tutorial-flexbox-1

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…

Mengenal Masa Depan CSS3 Layout: Flexbox


Aug 28th, 2013 News, Web Design 3 Comments

flexbox

Ada yang sudah pernah mendengar flexbox? Yap, flexbox memang css3 module yang powerfull untuk mengatur layout. Buat kamu yang belum pernah mendengarnya, jangan panik, this is your chance to catch up what is flexbox is. Flexible Layout (Flexbox) merupakan modul css3  (bukan properties, karena terdiri dari rangkaian properties) yang bertujuan untuk memberikan pengaturan baik layout,…

Membuat Grid Layout HTML Dengan LESS

Grid

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…

Mengedit Tampilan Web dengan Google Chrome

Inspect Element | Google Chrome

Google Chrome ternyata bisa juga Anda manfaatkan untuk mengedit tampilan web Anda (mock up). Namun sebelum tutorial ini kami Lanjutkan, Anda sebaiknya harus sudah menguasai kedua hal berikut : Dasar-dasar HTML Dasar-dasar CSS Layout Jika kedua hal tersebut belum Anda kuasai, sebaiknya anda membaca-baca dulu tentang css & html dari beberapa website berikut ini atau…

Belajar CSS Hari ke-1 “Fundamental”

day1

Saya akan membagikan ilmu yang telah saya pelajari mengenai CSS, ini mungkin metode yang saya rasa sesuai bagi pemula jika ingin mempelajari mengenai CSS. Menurut saya CSS itu adalah sekumpulan “KOTAK” yang tersusun dengan baik, That’s It. Jika kemauan anda untuk belajar dibawah 80%, saya sarankan anda meninggalkan artikel ini, karena dibutuhkan keseriusan yang cukup….

Belajar CSS Layout | Panduan

learn-css-layout

Belajar membuat layout website dengan css tidak lah sulit, namun bagi beberapa orang yang baru memulai terlihat rumit, karena harus berurusan dengan sintak-sintak HTML dan CSS yang tidak sedikit, ada banyak sekali sintak HTML dan CSS yang harus di hafal untuk dapat menjadi web designer yang handal. Ada banyak cara untuk belajar suatu bidang ilmu,…