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 – 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Membuat Tulisan Koran Atau Multiple Column Dengan CSS3 | www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="kotak"> <h1>Membuat Tulisan Koran Atau Multiple Column Dengan CSS3 | www.malasngoding.com</h1> <h2>Contoh Tulisan Koran</h2> <br/> <p class="koran"> Membuat Tulisan Koran Atau Multiple Column Dengan CSS3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Membuat Tulisan Koran Atau Multiple Column Dengan CSS3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Membuat Tulisan Koran Atau Multiple Column Dengan CSS3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </body> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
body{ background: #35A9DB; font-family: roboto; color: #fff; } h1,h2{ text-align: center; } .kotak{ width: 800px; height: auto; margin: 10px auto; } .koran{ /*jumlah column*/ -webkit-column-count: 3; /* support Chrome, Safari, Opera */ -moz-column-count: 3; /* support Firefox */ column-count : 3; /*lebar column*/ -webkit-column-width: 100px; /* support Chrome, Safari, Opera */ -moz-column-width: 100px; /* support Firefox */ column-width :100px; /*jarak column dengan column yang lain*/ -webkit-column-gap : 20px; -moz-column-gap : 20px; column-gap : 20px; /*ketebalan garis*/ -webkit-column-rule-width : 1px; -moz-column-rule-width : 1px; column-rule-width : 1px; /*pengaturan garis dengan format nilai jenis_garis warna*/ -webkit-column-rule : 1px solid blue; -moz-column-rule : 1px solid blue; column-rule : 1px solid blue; /*mengatur span column*/ -webkit-column-span :all; -moz-column-span :all; column-span :all; } |

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.
1 2 3 4 |
/*jumlah column*/ -webkit-column-count: 3; /* support Chrome, Safari, Opera */ -moz-column-count: 3; /* support Firefox */ column-count : 3; |
column-width di gunakan untuk menentukan lebar dari masing-masing multiple column.
1 2 3 4 |
/*lebar column*/ -webkit-column-width: 100px; /* support Chrome, Safari, Opera */ -moz-column-width: 100px; /* support Firefox */ column-width :100px; |
column-gap berfungsi untuk menentukan jarak masing-masing column.
1 2 3 4 |
/*jarak column dengan column yang lain*/ -webkit-column-gap : 20px; -moz-column-gap : 20px; column-gap : 20px; |
column-rule-width untuk menentukan lebar atau ketebalan garis.
1 2 3 4 |
/*ketebalan garis*/ -webkit-column-rule-width : 1px; -moz-column-rule-width : 1px; column-rule-width : 1px; |
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.
1 2 3 4 |
/*pengaturan garis dengan format nilai jenis_garis warna*/ -webkit-column-rule : 1px solid blue; -moz-column-rule : 1px solid blue; column-rule : 1px solid blue; |
dan terakhir column-span untuk menentukan span column.
1 2 3 4 |
/*mengatur span column*/ -webkit-column-span :all; -moz-column-span :all; column-span :all; |
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 :).
Tutorial Menarik Lainnya

Membuat Bentuk Jajar Genjang Dengan CSS3


Cara Membuat Sliding Menu Dengan CSS3 dan JQuery


Cara Membuat Animasi Preloader Dengan CSS3

