DEMO Membuat Gambar-Image Berderet Horizontal

Di bawah ini adalah DEMO penataan gambar-image membentuk deret gambar horizontal. Untuk mendapatkan penataan gambar seperti ini kita hanya menggunakan satu bentuk float (float-left), height untuk setiap gambar bernilai sama (100px) dengan sebagian besar gambar memanfaatkan kode width: auto; --> Hanya sebagian kecil menggunakan width dengan ukuran yang ditentukan (terutama gambar diujung kanan). Perlakuan khusus ini dilakukan agar penataan menjadi rapi dengan seluruh bagian mempunyai sisa ruang (margin) yang sama (pada box gallery).

Penggunaan float-right sebenarnya dapat juga dilakukan, akan tetapi kode menjadi lebih kompleks. Melalui penggunaan kode ini diharapkan nantinya bisa sebagai bahan untuk mencoba memahami perubahan-perubahan lain, baik pada width, height, background, margin, float, border-radius serta penggunaan CSS3 untuk membuat berbagai animasi melalui CSS3 animation atau CSS3 transition dan transformation. Perlu dipahami bahwa tutorial penataan gambar ini adalah dasar untuk menciptakan berbagai penataan gambar yang lain!

Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Cara Membuat dan Menata Gambar-Image Berderet Horizontal

Original tutorial by gubhug reyot

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.

1. gubhug reyot
2. Tanty Template Modification
3. bloggerstuars

Thank you for your visit!

Greeting