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.
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>
<h1>Membuat Tulisan Koran Atau Multiple Column Dengan CSS3|www.malasngoding.com</h1>
<h2>Contoh Tulisan Koran</h2>
<br/>
<pclass="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:10pxauto;
}
.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:1pxsolid blue;
-moz-column-rule:1pxsolid blue;
column-rule:1pxsolid 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:1pxsolid blue;
-moz-column-rule:1pxsolid blue;
column-rule:1pxsolid 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 :).
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.
Membuat Bentuk Jajar Genjang Dengan CSS3 – Halo teman-teman, selamat datang kembali di tutorial CSS3 Lengkap dari malasngoding.com. Apa kabar semua? mudah-mudahan teman-teman dan keluarga ...
Cara Membuat Sliding Menu Dengan CSS3 dan jQuery – Halo web designer. selamat datang di tutorial cara membuat slide menu di www.malasngoding.com. pada tutorial ini ...
Cara Membuat Animasi Preloader Dengan CSS3 Cara Membuat Animasi Preloader Dengan CSS3 – Terima kasih sebelumnya saya ucapkan kepada teman-teman yang sudah membaca tutorial-turoial pemrograman ...
Cara Mengganti Warna Placeholder Dengan CSS Cara Mengganti Warna Placeholder Dengan CSS – apa kabar teman-teman sekalian. hehe.. semoga sehat selalu ya. bertemu lagi lewat ...
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.