FancyLine Stackmake a fancy styled horizontal line (
<hr>element is one of the most neglected tags in HTML. Without styling, it looks rather boring:
In HTML5, the meaning of the
<hr>element changed. It now ‘represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book’ (source).
Internet Explorer 7 and worse is a thing of the past for many tears, styling is also no longer a problem, so I think it is time to start using the
<hr>element on a wider scale – but this time looking fancy!
Here’s where the FancyLine stack comes in. It puts a
<hr>element in place, which you can style in many different ways using the border styles solid, dashed, dotted and double, but I also included a handful of ‘custom’ styles.
DemoUse the FancyLine stack to separate content with a horizontal line that can have a styling from a subtle ‘3D’ effect:
to over-the top:
Visit the demo page for more examples.
UsageJust drag the FancyLine stack in your Stacks page and style it. Set the height, the style and the color(s). Visit the demo page for an overview of all styles.
The spacing between the text above and below the line may or may not be defined by the theme. The option remove default spacing removes any theme defined spacing, so you can set your own using (Detailed) Margin in the Layout settings of the stack.
Need help using it on a non-stacks page? Here’s a tutorial.
fig. 1: ‘dotted line’ in Webkit browsers (Safari)
fig. 2: ‘dotted line’ in other browsers (Firefox, Chrome, Opera, Edge,…)
Pay what you wantBuy this stack and pay for it what you think is reasonable. In the shopping cart, just change the suggested price to the amount you are willing to pay.
Of course, you are free to set the price to zero resulting in a free download but (especially when you intend to use it in a project) consider the following: