Tutorial CSS3 Part 8 – Membuat Tulisan Koran Atau Multiple Column Dengan CSS3


Membuat Tulisan Koran Atau Multiple Column Dengan CSS3

Membuat Tulisan Koran Atau Multiple Column Dengan CSS3

Membuat Tulisan Koran Atau Multiple Column Dengan CSS3 – Salah satu kelebihan css3 lagi yang akan kita bahas masih di tutorial css3. adalah multiple column. pernah terfikir tidak oleh teman-teman untuk membuat efek atau bentuk tulisan dengan memiliki beberapa column seperti koran. mungkin teman-teman akan memerlukann fungsi multiple column css3 ini untuk membuat tulisan dengan bentuk koran. yaitu tulisannya seperti tulisan pada koran yang memiliki beberapa column. mungkin teman-teman akan membutuhkan multiple column css ini dalam membuat sebuah template website. apalagi template website yang teman-teman buat misalnya seperti template magazine atau blog/website yang fokus pada bidang berita atau majalah.

Baca juga :

Pada Tutorial css3 part 8 ini kita akan belajar tentang cara membuat tulisan koran dengan css3. yaitu menggunakan fungsi baru css3 yang di sebut dengan multiple column. di sini kita akan jelaskan tentang cara membuat multiple column pada text atau text seperti koran. apa saja property css yang sudah di sediakan untuk membuat multiple column pada text. dan sebagainya. baiklah silahkan teman-teman perhatikan penjelasan berikut untuk membuat efek koran dengan css. Tutorial CSS3 Part 8 – Membuat Tulisan Koran Atau Multiple Column Dengan CSS3.

Membuat Tulisan Koran Atau Multiple Column Dengan CSS3

Ada beberapa property yang di sediakan oleh css3 untuk membuat efek multiple column. yaitu :

  • column-count
  • column-width
  • column-gap
  • column-rule
  • column-rule-style
  • column-rule-color
  • column-rule-width
  • column-span

Ke-8 property di atas akan saya jelaskan satu persatu fungsi kegunaannya untuk membuat tulisan koran atau multiple column text dengan css3. silahkan teman-teman buat sebuah file html atau php. dan buat juga sebuah file css nya. di sini saya membuat sebuah file dengan nama index.html.

index.html

style.css

Membuat Tulisan Koran Atau Multiple Column Dengan CSS3

Membuat Tulisan Koran Atau Multiple Column Dengan CSS3

dan dapat teman-teman lihat pada gambar di atas. tulisan dengan bentuk dan format koran pun sudah jadi. perhatikan pada kegunaan property column di atas masing-masing.

column-count berfungsi untuk menentukan jumlah kolum yang ingin kita buat.

column-width di gunakan untuk menentukan lebar dari masing-masing multiple column.

column-gap berfungsi untuk menentukan jarak masing-masing column.

column-rule-width untuk menentukan lebar atau ketebalan garis.

column-rule untuk menentukan pengaturan garis. teman-teman boleh tidak menggunakannya jika tidak ingin menggunakan garis pada multiple column atau tulisan koran yang teman-teman ingin buat.

dan terakhir column-span untuk menentukan span column.

adapun property lainnya yang bisa teman-teman coba adalah sebagai berikut untuk membuat multiple column atau tulisan koran dengan css3.

column-count untuk menentukan jumlah column yang ingin di buat
column-width untuk menentukan lebar column
column-gap menentukan jarak column
column-rule menentukan garis pada column
column-rule-style menentukan jenis garis (solid,dotted dan lain-lain)
column-rule-color menentukan warna garis
column-rule-width menentukan lebar/ketebalan garis

Oke sekian dulu tutorial css3 part 8 – Membuat Tulisan Koran Atau Multiple Column Dengan CSS3. semoga bermanfaat dan selamat bereksperimen :).


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

jajar genjang css
membuat slidemenu dengan css dan jquery
cara membuat animasi preloader dengan css3

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD