CODEWITHSUNDEEP
htmlcssshadow
Michael Farah
Michael Farah

Reputation: 421

How to create shadow efffect on vertical line

I'm trying to determine if there is a css method for creating shadow vertical lines as in this example

enter image description here

Upvotes: 0

Views: 14107

Answers (2)

Jochem261
Jochem261

Reputation: 217

You can use box shadows for this

box-shadow: 1px 0px 0 blue, 2px 0px 0 red;

this will create 2 lines on the right side of the element one will be red the other one blue

But keep in mind that this is not supported in IE8 and lower so I would recommend using css borders for one of the lines.

Using a border and a box shadow:

box-shadow: 1px 0px 0 red; border-right: 1px solid blue;

More info on box shadows: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Upvotes: 3

tiagojpdias
tiagojpdias

Reputation: 458

Fiddle

Just use the box-shadow and play with it to get the best result for you.

.line {
    border-left: 2px solid black;
    height: 100px;
    display: inline-block;
    box-shadow: 2px 0px 2px #888;
}

Upvotes: 6

Related Questions