Featured Post

Membuat Tampilan Kolom Koran dengan CSS

Dalam seni ngeblog, ada kalanya ingin membuat blogazine. Blogazine adalah gaya ngeblog yang menurut beberapa narablog keren. Sayangnya saya tidak sepakat jika blogazine keren. Hal ini karena membuat desain yang umum itu lebih susah dan banyak pertimbangan dibandingkan dengan hanya mendesain satu halaman blogazine saja.

Kecenderungan orang yang ngeblog dengan gaya blogazine, kontennya kurang kuat. Berbeda dengan blog yang desainnya umum, biasanya sudah fokus pada konten karena desain sudah selesai.

Dalam blogazine terkadang memakai gaya penulisan layaknya koran. Dengan CSS, kamu bisa membuat tampilan kolom-kolom layaknya koran. Bagaimana caranya? Penasaran, bukan? Berikut ini adalah ulasannya.

Gaya Kolom Koran dengan CSS

Untuk membuat tulisan bergaya kolom koran, CSS menyediakan properti "column-count". Untuk pengguna Mozilla Firefox menggunakan prefiks "-moz", untuk pengguna Google Chrome menggunakan prefiks "-webkit". Berikut ini adalah contohnya:

See the Pen wEFsb by Iskandar Dzulkarnain (@iskael) on CodePen.


Untuk mengatur jarak antarkolomnya menggunakan properti "column-gap". Mudah, 'kan? Selamat mencoba :)

Mungkin Kamu Juga Suka...

Comments

  1. info yang menarik. ternyata sederhana sekali.
    terima kasih :)

    ReplyDelete
    Replies
    1. sama2, berasa komennya mas komen spam yah :D

      Delete
  2. terima kasih. sy sdh sering terapkan beginian

    ReplyDelete
  3. code itu ditulis di sebelah mana...?

    ReplyDelete
    Replies
    1. di CSS-nya
      silakan perhatikan code saya yang ada di codepen (blok hitam)

      Delete
  4. kalau pakai gaya koran, berat loadingnya dan juga kadang navigasi menu susah (ga nemu mana home, dll)

    ReplyDelete

Post a Comment