Vertical line with gradient – HTML + CSS


I had to develop a complete redesign for a homepage of the client and I received it as an image. I had a table with the rightest column with rowspan=”8″ and the client designer has decided to add a vertical line with gradient in between the content of that column with the other part of the table. Immediately I thought to separate the content of that column in separate div element. But it seemed to me a lot of unnecessary work and I was sure i could find something that fits my needs. I found a great post that explains in detail about vertical line with gradient, and booom, I found a solution to my “problem”. There it was, the vertical line in the middle of two columns including the gradient.

The trick is to add an empty column with <hr> (yes, “horizontal rule”) and add css class to it. I was a little skeptic that it would work in my case but anyway I tried it and it worked like a charm.

<table style=”margin:auto;border-collapse:separate;border-spacing:10px 0″>
<tbody>
<tr>
<td style=”vertical-align:top; width:[your_value_here]px”>
Content on the left column – it can be writings or images
</td>
<td style=”vertical-align:top”>
<hr class=”name-of-your-vertical-line”>
</td>
<td style=”vertical-align:top; width:[your_value_here]px”>
Content on the right column – it can be writings or images
</td>
</tr>
</tbody>
</table>

And the CSS

hr.name-of-your-vertical-line {
border : 0;
height : (height)px; /*your own value to suit your content*/
width : 1px;
background-image: -webkit-linear-gradient(top, #color1, #color2, #color3);
background-image: -moz-linear-gradient(top, #color1, #color2, #color3);
background-image: -ms-linear-gradient(top, #color1, #color2, #color3);
background-image: -o-linear-gradient(top, #color1, #color2, #color3);
background-image: linear-gradient(top, #color1, #color2, #color3);
}

All you have to do now is to specify the height and the colors.  Good Luck!

Advertisements
Gallery | This entry was posted in Home and tagged , , , , . Bookmark the permalink.

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