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 di css, kini saya akan membahas sebuah property yang bernama Column-Rule-Style.

guna dari property column-rule-style yaitu bagi memberikan style antara kolom yang berdekatan di suatu multi kolom atau kolom ganda. Pemakaian ini akan amat bermanfaat seandainya kita ingin memberikan pembatas antar kolom ,  Oke saya seketika contohkan saja ya..?

 

column-rule style mempunyai beberapa value yang dapat kita gunakan antara lain yaitu :

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

Seluruh 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 di browser kalian masing-masing kira-kira seperti inilah hasilnya :

 

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

See you 🙂

Sumber https://kursuswebsite.org