Pengenalan Property Column-Rule-Style Pada CSS

Haloooooooo menjelang holiday :V mungkin dari kalian ada yang udah holiday duluan atau masih beberapa hari lagi:D Oke kali ini kita akan masih membahas tema yang sama yaitu mengenai property pada css, sekarang saya akan membahas sebuah property yang bernama Column-Rule-Style.

fungsi dari property column-rule-style adalah untuk memberikan style antara kolom yang berdekatan pada suatu multi kolom atau kolom ganda. Penggunaan ini akan sangat berguna jika kita ingin memberikan pembatas antar kolom , Oke saya langsung contohkan saja ya..?

column-rule style memiliki beberapa value yang bisa kita pakai antara lain adalah :

column-rule style:none;

column-rule style:hidden;

column-rule style:doted;

column-rule style:dashed;

column-rule style: solid;

column-rule style:double;

column-rule style:groove

column-rule style:inset;

column-rule style:outset;

column-rule style:ridge

Semua value di atas dapat kalian coba sendiri, nah disini saya akan mencoba menggunakan value doted , salin code berikut :

//HTML

<div class="container">
<div class="element">
<p>
They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. Now were up in the big leagues getting' our turn at bat. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. And you know where you were then. Girls were girls and men were men. Mister we could use a man like Herbert Hoover again?
</p>
<p>
Here's the story of a man named Brady who was busy with three boys of his own. In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.
</p>
<p>
They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. Now were up in the big leagues getting' our turn at bat. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. And you know where you were then. Girls were girls and men were men. Mister we could use a man like Herbert Hoover again?
</p>
<p>
Here's the story of a man named Brady who was busy with three boys of his own. In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.
</p>
</div>
</div>

//CSS

body {
  background-color: #ebf4d2;
  color: #555;
  font-size: 0.95em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 20px;
  background-color: white;
  -moz-columns: 5em 3;
  -webkit-columns: 5em 3;
  columns: 5em 3;
  -webkit-column-gap: 1.5em;
  -moz-column-gap: 1.5em;
  column-gap: 1.5em;
  -webkit-column-rule-width: 5px;
  -moz-column-rule-width: 5px;
  column-rule-width: 5px;
  -webkit-column-rule-style: dotted;
  -moz-column-rule-style: dotted;
  column-rule-style: dotted;
  -webkit-column-rule-color: #ef994f;
  -moz-column-rule-color: #ef994f;
  column-rule-color: #ef994f;
  text-align: justify;
}

Lalu kalian jalankan pada browser kalian masing-masing kira-kira seperti inilah hasilnya :

Nah kira-kira seperti itulah hasilnya untuk value yang lainya tinggal kalian coba saja sendiri ya hehhe.

See you 🙂

Pengenalan Property Column-Rule-Style Pada CSS

Kategori