Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaaan baik, kita lanjut lagi belajarnya, kemarin kita sudah belajar tentang bagai mana cara membagi kolom pada website dengan menggunakan column-count pada css, nah pada tutorial kali ini masih ada hubungannya dengan column-count, yang kita bahas kali ini adalah fungsi propertis column-rule-style pada css3.
Fungsi dari propertis column-rule-style adalah untuk membatasi kolom yang kita buat dengan menggunakan column-count, untuk lebih jelasnya kita langsung saja praktekkan, silahakan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Latihan</title> <style> div { width:900px; margin:auto; column-count:3; } </style> </head> <body> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, nisi ac ultrices dictum, risus mauris lobortis nunc, a tempor leo mi a erat. Nullam aliquet ligula id ipsum malesuada, feugiat sodales eros tempus. Suspendisse dignissim, nunc id pretium hendrerit, elit dolor fringilla elit, eget lobortis quam libero eu magna. Maecenas volutpat ultrices nunc, at faucibus ipsum egestas sed. Proin sit amet ex ut nulla malesuada rutrum. Morbi tempor quam ante, vel dictum ipsum sollicitudin vel. Maecenas pharetra viverra tortor sit amet fermentum. Praesent vulputate ex ut iaculis lobortis.</p> <p>Praesent dignissim velit justo, ut gravida odio dictum eget. Ut feugiat, nulla sed sagittis efficitur, magna massa condimentum mi, nec viverra sapien erat ac nisi. Praesent porta risus a gravida volutpat. Donec in imperdiet purus. Praesent ullamcorper nunc quis facilisis bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum lacus a enim tempus consectetur. Pellentesque semper dapibus est, ac eleifend libero rutrum hendrerit. Proin pretium purus ut felis sagittis, ac porttitor ipsum sagittis. Nulla sollicitudin interdum interdum.</p> <p>Nunc convallis orci a ligula pulvinar varius. Aenean eget ultrices justo. Quisque ullamcorper, risus sed elementum dignissim, lorem nulla tincidunt enim, sit amet interdum diam dui non nisi. Aenean vehicula mauris in nisl hendrerit, a fermentum elit lobortis. Proin porta neque leo, et ultrices ipsum mollis vitae. Cras et posuere diam. Morbi placerat tellus vitae neque ultrices, sed lacinia nibh posuere. Morbi a interdum velit. Etiam nec est sapien. Vestibulum mi elit, vehicula egestas urna quis, consectetur facilisis tortor. </p> </div> </body> </html> |
saya mengatur pengaturan css seperti tutorial kemarin, yaitu membuat 3 buah paragraf didalam sebuah div dan saya mengatur css seperti script diatas, maha hasilnya akan seperti berikut ini:
naha sekarang coba teman-teman tambahakan pengaturan css seperti ini:
|
1 |
column-rule-style:dotted; |
jika script ini ditambahakan maka hasilnya akan seperti berikut ini:
colom yang kita bagi akan dibatasi oleh sebuah garis seperti halnya kita menggunakan border, dengan nilai dotted, untuk nilai teman-teman bisa ganti sesuai keinginan karena nilai didalam properti ini lumayan banyak.
Oke giaman teman-teman cukup mudah bukan? untuk tutorial kali ini tentang fungsi propertis column-rule-style pada css3Â saya rasa cukup sampai disini dulu, semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih.