sparkles2.png

Customised Line Break

 

This effect takes the classic <hr /> line break tag and adds a few layers of customisation to it. These include the styling, the thickness and the colour of the line.

 
 
 

See the effect in action

 
Screenshot 2021-04-13 at 22.57.22.png
 
 
 

How to use the Effect

  1. Simply create a text box, navigate to the top left of the styling menu and click 'Source'. Once in, delete everything (or create a new line) and paste the code below.
    • To edit the line, read the parts in aqua in the code box.
  2. To get a custom style please refer to the exampels in the 'Styles' box below
    • For doing a more styalised line break, you will need to change border: to border-top:
 

HTML

<hr style="border: 1px solid #000000;" />

(To change the weight/thickness of the line, change the part of the code in Red)
(To change the style of the line, change the part of the code in
Blue)*
(To change the colour of the line, change the part of the code in
Green)

 

*STYLES

<hr style="border-top: 1px solid #000000;" />


Double border-top: 3px double #8c8b8b



Dashed border-top: 1px dashed #8c8b8b



Dotted border-top: 1px dotted #8c8b8b