<p>Вибери потрібне значення для <strong><code>column-rule-color</code></strong>:</p>
<section class="form">
<span>Клікай тут: </span> <input type="color" class="input" id="val" onchange="change(this.value)"></input>
</section>
<div id="block">
<p>Оголовиши властивість <code>column-rule-color</code> та прописавши для неї потрібне значення ми можемо змінити колір меж між стовпцями.</p>
</div>
body {
padding: 36px;
line-height: 1.45;
font-size: 20px;
font-family: sans-serif;
}
p {
margin-top: 0;
}
.form {
border-left: 4px solid #666;
margin: 16px 0;
padding: 16px 0 2px 15px;
line-height: 1;
}
.input {
margin-bottom: 16px;
padding: 1px;
font-size: 13px;
}
#block {
background: #f1f1f1;
padding: 10px;
margin-bottom: 16px;
-webkit-column-gap: 38px;
-moz-column-gap: 38px;
column-gap: 38px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
/* Safari and Chrome */
-webkit-column-rule-width: 4px;
-webkit-column-rule-style: dashed;
/* Firefox */
-moz-column-rule-width: 4px;
-moz-column-rule-style: dashed;
/* CSS3 */
column-rule-width: 4px;
column-rule-style: dashed;
}
function change(val) {
block.style.columnRuleColor = val;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.