Multi-color Divider

There are a few places on my website where I’ve used the border on my containers to create lines between different sections.  Right now, the lines are just plain black.  So I thought I’d see if I could find a way to jazz them up a bit, and so I’ve found a way to make a multicolor line.

The CSS

First, make sure you have a larger container for the line to live in:

container

One quick note, making this “big” container isn’t necessary if you’re adding the line at the end of something on your website already living in a larger container.  Just make sure that you have a div in your HTML code that you can put sections in to add the lines.

Now, pick how many colors you want and create containers for each of those colors.  Using the border-bottom (or border-top) function, you can add just a horizontal border to your container and specify type, size, and color.

 

 

colors

 

You’ll notice that I made the height of each container pretty small; I did that on purpose so that the containers will be less likely to mess up the layout on a page.

HTML

The HTML is pretty simple.   First, make sure you have some div for your “big” container.  Second, create a section for each color that you have, specifying the classes in the order that you want the colors to appear.   Make sure you close each section  before making the next section.  I only used two colors, but I alternated them so my HTML code looks like this:

html

 

 

The final product looks like this:

Final

 

The lines I have there are pretty thick; on my actual website I’d probably tend to use a 1-2px border as opposed to 5px.  You can adjust the length of each segment by simply adjusting the width of the respective container in the CSS.  A word of caution though: if you make the border dashed or dotted, you’ll want to make sure you have margins on your color containers that will keep the space between the colors.  Here’s what happens if you don’t have the margins:

Dashed

 

Adding a “margin-left:5px;” line for each container makes it look much better:

Margin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s