column-rule-color — колір лінії між колонками в CSS
Властивість column-rule-color в багатоколонковому тексті задає колір ліній між колонок. Якщо такий колір явно не вказано, то колір тексту в колонках і колір ліній між ними збігається.
Властивість column-rule-color слід використовувати разом із властивостями column-rule-width та column-rule-style, інакше використання цієї властивості не буде мати ефекту (через відсутність значення "style" або "width").
Загальний опис
автор: NagarD
- Нотатка
-
Ви можете використовувати універсальну властивість
автор: Svitlanacolumn-rule, щоб встановити ширину, стиль і колір стовпчика в одному місці.
Синтаксис
column-rule-color: color|initial|inherit;Властивість column-rule-color може отримувати 3 значень:
-
color -
Встановлює колір лінії, значення може бути в будь-якому допустимому для CSS форматі.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Співпадає з кольором тексту |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.columnRuleColor="#0000ff" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 52 | 9 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 52 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Колір розділювача — червоний. Сам собою колір лінію не намалює: стиль задано окремо через column-rule-style.
HTML
<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
column-count: 3;
column-rule-style: solid;
column-rule-color: #ff0000;
}Значення у дії
HTML
<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>CSS
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;
}JS
function change(val) {
block.style.columnRuleColor = val;
}
//# sourceURL=pen.jsПриклад використання
HTML
<span>За замовчуванням, колір межі (між стовпчиками у багатоколонковому тексті, як тут) такий же як і колір основного тексту. Тобто дорівнює ключовому слову <em>CurrentColor</em>.</span>
<div class="multicol">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, similique. Ullam et cum illo vitae, repellendus temporibus necessitatibus quam. Eos, perferendis! Beatae ratione quas inventore at voluptatibus nesciunt rem neque.</p>
</div>
<span>Але ми можемо змінити це, оголовиши властивість <code>column-rule-color</code> та прописавши для неї потрібний колір. Наприклад, для цього контейнера був прописаний колір <em>gold</em>.</span>
<div class="multicol color">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati libero, saepe ullam ex illo dignissimos blanditiis tenetur consequuntur repellat temporibus aliquid. Provident corrupti omnis molestiae a fugit soluta animi hic..</p>
</div>CSS
body {
font-family: sans-serif;
line-height: 1.45;
}
p {
margin-top: 0;
}
.multicol {
background: #f1f1f1;
padding: 10px;
margin-bottom: 16px;
margin-top: 15px;
-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;
}
.multicol.color {
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
}
span{
font-size: 18px;
}Коментарі
Коментарів ще немає — будьте першим!