Membuat kolom paragraf dengan css 3

Saya yakin yang membaca Tulisan ini tahu bentuk artikel dalam surat kabar (koran).
Pada umumnya, paragraf dalam suatu artikel di surat kabar dibagi menjadi beberapa kolom, biasanya 3 sampai 4 kolom. Menurut Saya, Tujuannya adalah untuk memudahkan para pembaca melihat semua isi yang ditampilkan dalam sebuah koran.
Jika anda ingin membuat hal yang sama seperti pada surat kabar didalam sebuah halaman website, saya akan memberikan Tips untuk anda.
syaratnya, Anda harus harus mengetahui cara membuat html dan belajar css, dalam hal ini adalah css 3.

Lihatlah tampilan contoh paragraf pada artikel dibawah ini…!
Jika anda tertarik untuk membuatnya, silahkan ambil contoh kode html dan css sintak-nya dibawah ini……..

Membuat Ogoh-ogoh

---

Sebulan sebelum hari raya NYEPI, biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.
Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh, saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka, sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.

Kalau dilihat dari bentuk ogoh ogoh saat itu, kebanyakan berbentuk raksasa dan binatang dan thema nya kurang bervariasi.
Seiring dengan perkembangan jaman, Ogoh ogoh telah ber-Evolusi, baik dari segi material, bentuk dan tema yang dibuat telah mengalami perubahan.
Kalau dulu Bambu sebagai kerangka utama, sekarang berubah menjadi Besi yang di las agar lebih kokoh dan dapat membuat bentuk yang lebih dinamis. Pada saat ogoh ogoh diarak pun sudah mengalami perubahan, sekarang banyak yang memanfaatkan teknologi electronik untuk menciptakan suatu efek yang berkesan lebih hidup, seperti penataan cahaya dan sound-nya.

Nah, dari apa yang saya paparkan tidak bisa dipungkiri lagi bahwa perkembangan jaman telah memberikan inspirasi bagi kita dalam berkreasi, dan jika ini terus berlanjut dari tahun ke tahun akan selalu ada perubahan sesuai jamannya.

Bila saya bayangkan kedepannya nanti, ketika sesuatu bisa didapat dengan mudah, dan melihat kreativitas anak muda di Bali yang tiada henti…

mungkinkah Ogoh ogoh akan seperti robot?

Jika mungkin…, adakah perdebatan publik pro dan kontra ?

Bila ada…, siapakah yang harus disalahkan ?

Caranya adalah sebagai berikut:

• Pertama, buatlah sebuah dokumen baru pada Notepad, lalu ketikan <div class=”kolom-wrap></div>.
• Ketik <h1>JUDUL ARTIKEL</h1><hr/>diantara tag <div class=”kolom-wrap></div>.
• Dibawah tag </hr/>, ketik lagi sebuah tag <div class=”kolom”></div>.
• Diantara tag <div class=”kolom”></div> adalah isi paragraf dari sebuah artikel yang diawali dengan tag <p> dan ditutup dengan tag </p>.

Contoh kode HTML nya seperti ini:

<div class=”kolom-wrap>
<h1>JUDUL ARTIKEL</h1>
<hr/>
<div class=”kolom”>
<p>Sebulan sebelum hari raya NYEPI,
biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.</p>
<p>Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh,
saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka,
sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.</p>
</div>
</div>

Setelah selesai membuat file HTML nya, sekarang kita buat style untuk mengatur tampilan nya agar seperti artikel di surat kabar, dengan menggunakan CSS seperti dibawah ini:

div.kolom-wrap {
border:1px solid #333333;
background: #ccc;
margin:0;
box-shadow: 3px 3px 3px #333333;
-moz-box-shadow: 3px 3px 3px #333333;
-webkit-box-shadow: 3px 3px 3px #333333;}

div.kolom-wrap h1 {
text-align:center;
color:#999999;
text-shadow: 2px 2px 0 #000;}

div.kolom-wrap hr {
border:3px solid #666666;
margin:0 2em;}

div.kolom {
-moz-column-count: 2;
-webkit-column-count: 2;
padding:5px 10px 0 10px;}

Langkah selanjutnya adalah melakukan test pada Browser anda…!
Catatan: Tampilan ini hanya berlaku pada Browser Mozilla versi 3.5.3 ke-atas, Google Chrome, Safari versi terbaru. Tidak berlaku untuk Intrenet Explorer.