Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Fitur Multicolumn Layout Dalam CSS3

Biasanya dalam membuat multicolumn, kita membuat beberapa <div> atau <section>. Dalam CSS3, kita dapat membuat multicolumn hanya dengan menggunakan satu tag html saja & dengan bantuan -moz-column-count. Untuk lebih jelasnya, silahkan lihat demo & kodenya dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Multi Column CSS3</title>
<style type="text/css">
body {
    background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.multi-kolom {
   margin: auto;
   height: auto;
   text-align: justify;
    -moz-column-count: 2;
   -moz-column-gap: 20px;
  -moz-column-width: auto;
    -moz-column-rule: 1px solid #000;
}
.multi-kolom-3 {
  margin: auto;
   height: auto;
   text-align: justify;
    -moz-column-count: 3;
   -moz-column-gap: 20px;
  -moz-column-width: auto;
    -moz-column-rule: 1px solid #000;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Multi Colum CSS3</h1>
<section class="multi-kolom">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</section>
<section class="bersih">&nbsp;</section>
<section class="multi-kolom-3">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/12/fitur-multicolumn-layout-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>
Demo Multi Kolom CSS3

Menarik bukan ? Anda bisa memodifikasi sesuai dengan kreatifitas anda yang tentunya dengan penambahan border, box-shadow, dan sebagainya.

19 Comments

  1. Dwi alfinaReply

    mantafff gan ;) ijin pelajari

    • Nurul ImamReply

      Silahkan :)

  2. Intan SudibjoReply

    cocok nih buat pelajaran bikin template hehe :)

    • Nurul ImamReply

      Mau bikin template multi kolom pake CSS3 mas ?

  3. ElfridaReply

    Boleh dicoba nih.. Kebetulan di sekolah, saya lagi belajar HTML hehe :D

    • Nurul ImamReply

      Silahkan pelajari, semoga membantu :)

  4. AgriReply

    pantas dicoba ni… :D
    Oya mas intan,, bukannya penggunaan -moz- dkk tidak bisa lulus uji valid css3?

    • AgriReply

      waduh salah tulis, maksudnya mas imam.. maaf mass. :D

    • Nurul ImamReply

      Cuma warning mas, tapi tetep valid :)

  5. Index ApkReply

    huh, mumet mas, lihat tu code..wkwkwk

    • Nurul ImamReply

      Tutup mata donk mas, rasanya kode itu dilihatna indah lho :D

  6. Mekanik KomputerReply

    wih keren banget euy CSS3nya

    • Nurul ImamReply

      Sekeren adminnya yah :D

  7. RirinReply

    wah keren juga ya tampilan multi kolom. Serasa kayak baca koran :D

    • Nurul ImamReply

      Yupsss… cocok buat bikin web koran :D

  8. shiddiqReply

    itu pake notpad++ ya :)

    • Nurul ImamReply

      Pake apapun juga bisa, biasanya saya pake Sublime Text

  9. aldhi khekweReply

    saya ijin belajar, mas Nurul Imam :)

    • Nurul ImamReply

      Silahkan mas :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>