CSS

Membuat Website Satu Halaman Bergaya Flat Design Dengan Efek Scroll

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…

Proteksi CSS Dengan PHP

CSS yang merupakan kependekan dari Cascading Style Sheets adalah kumpulan kode yang digunakan untuk mempercantik tampilan website, css mengatur suatu objek harus seperti apa, berwarna apa, bentuknya bagaimana, ukurannya seberapa besar, dan lain sebagainya. CSS Biasanya digunakan di html, php, asp, dan lain lain. Membuat CSS itu tergolong gampang-gampang susah. Dan pada suatu hari saya…

Tutorial Flexbox CSS3 Basic

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…

Trik Menyamakan Tinggi Kolom DIV Dengan CSS

Menyamakan tinggi / height antara dua buat kolom dengan css kadang menyulitkan web designer, layout sudah dibuat dua kolom ternyata ketika salah satu kolom memiliki konten cukup banyak maka akan terlihat timpang, atau salah satu terlihat lebih panjang sedangkan yang satu lebih pendek. Nah pada artikel ini tutorial-webdesign.com akan memberikan sedikit tips agar kolom yang…

Membuat Jendela Pop Up Dengan CSS

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…

CSS Tanpa HTML

CSS Tanpa HTML

Tadi pagi iseng-iseng nyoba CSS tanpa HTML dan menyebarkan sebuah link demo ke twitter, Fan Page Facebook Tutorial Web Design, dan beberapa group, ternyata lumayan banyak tanggapan dan penasaran bagaimana membuatnya, kok bisa muncul tulisan di halaman web tapi di HTML nya tidak menulis apa-apa ketika di VIEW Source dengan Mozilla, hal itu bisa saja…

Membuat Bentuk Segitiga Dengan CSS

Gambar Segitiga

Dengan bantuan css kita bisa membuat div yang seharusnya berbentuk kotak menjadi bentuk segitiga, hanya perlu sedikit trik dan pemahaman tentang penggunaan border di css maka bentuk segitiga bisa kita buat dengan mudah. Pada kesempatan ini bentuk segitiga akan kita kelompokan menjadi dua bagian, yaitu arah panah yang mengarah ke atas, bawah, kanan, kiri. Sedangkan…

Membuat Auto Height 100% Dengan CSS (Fullscreen)

Auto Height 100% Fullscreen CSS

Membuat height 100% sesuai tinggi monitor dengan css kadang menjadi kendala bagi sebagian web designer, namun sebenarnya trik nya sangat mudah, hanya mereka kurang mengerti trik nya saja. Atau bisa jadi tidak peduli dengan semua tag yang ada di html. Ada pertanyaan di forum yang menanyakan dia membuat desain sudah sangat baik, sudah sesuai dengan…

1 2 3 4 5 6