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.

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

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

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

Support
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].
dotted-line-webkit
fig. 1: ‘dotted line’ in Webkit (Chrome, Safari)

dotted-line-firefox
fig. 2: ‘dotted line’ in Firefox

dotted-line-opera
fig. 3: ‘dotted line’ in Opera

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

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

fancyline HUD
© 2012-2017 Marathia Web Design | Contact