CSS Example: Column-Rule

<!DOCTYPE html>
<title>Example</title>
<style>
.animatedBox {
  font-family: sans-serif;
  background: beige;
  padding: 10px;
  column-count: 3;
  column-rule: 1px solid orange;
  animation: myAnimation 1s linear 1s 1 forwards;
}

@keyframes myAnimation {
  100% {
    column-rule: 5px solid olivedrab;
  }
}
</style>

<div class="animatedBox">
<p>If your browser supports the <code>column-count</code> property, this text should span across multiple columns. If it doesn't, then it will only span one long column. </p>
<p>When the animation runs, the column rule should change width and color. If not, your browser either doesn't support the <code>column-rule</code> property, or it doesn't support animations on that property.</p>
<p>You can always add browser extensions (eg, <code>-webkit-</code>, <code>-moz-</code> etc) to get it working. These have been intentionally omitted for brevity and to provide standards compliant code.</p>
<p>For more info about the <code>column-rule</code> property, see <a href="https://www.quackit.com/css/css3/properties/css_column-rule.cfm" target="_blank"><code>column-rule</code></a> over at Quackit.</p>
</div>

​x
 
<!DOCTYPE html>
<title>Example</title>
<style>
.animatedBox {
  font-family: sans-serif;
  background: beige;
  padding: 10px;
  column-count: 3;
  column-rule: 1px solid orange;
  animation: myAnimation 1s linear 1s 1 forwards;
}
​
@keyframes myAnimation {
  100% {
    column-rule: 5px solid olivedrab;
  }
}
</style>
​
<div class="animatedBox">
<p>If your browser supports the <code>column-count</code> property, this text should span across multiple columns. If it doesn't, then it will only span one long column. </p>
<p>When the animation runs, the column rule should change width and color. If not, your browser either doesn't support the <code>column-rule</code> property, or it doesn't support animations on that property.</p>
<p>You can always add browser extensions (eg, <code>-webkit-</code>, <code>-moz-</code> etc) to get it working. These have been intentionally omitted for brevity and to provide standards compliant code.</p>
<p>For more info about the <code>column-rule</code> property, see <a href="https://www.quackit.com/css/css3/properties/css_column-rule.cfm" target="_blank"><code>column-rule</code></a> over at Quackit.</p>
</div>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

About CSS

CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link> tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style> HTML tag, or by using the style attribute within an individual HTML tag.