FancyLine Stack

FancyLine Stack

make a fancy styled horizontal line (<hr>)

The <hr> element is one of the most neglected tags in HTML. Without styling, it looks rather boring:

Besides that, cross-browser styling was problematic in Internet Explorer before version 8; and in HTML4, it had no semantical meaning: it was just an ugly horizontal line.

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).

Now that Internet Explorer 7 and worse have become a thing of the past, 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.

Use 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.

Just 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.

Keep in mind that dotted will render differently in different browsers (fig. 1-4).
Internet Explorer 7 and worse, only the first color used in the styles double dashed, dotted line, sandwich and tricolor will show (fig. 5).

Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
fig. 1: ‘dotted line’ in Webkit (Chrome, Safari)

fig. 2: ‘dotted line’ in Firefox

fig. 3: ‘dotted line’ in Opera

fig. 4: ‘dotted line’ in IE8-10

fig. 1: ‘dotted line’ in IE6-7

fancyline HUD
© 2012-2017 Marathia Web Design | Contact