How to create radial shadow gradient css3 border

Question

I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see, the image disappears from above and below. This means that I cannot just use the background image using css, which is aligned to the left in the column to the right.

So, maybe I can use a css 3 border shadow with a radial gradient. I'm probably going to use table cells to do this because I need the shadow to stretch to the height of the highest column. How to do it?

Answer 1

The previous answers do not answer your question: "How to create a radial shadow of a css3 border gradient"

You can use a radial gradient to simulate the shadow of a border without images.

Demo: http://jsfiddle.net/sonic1980/wRuaZ/

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%); | | | | | | | +--> color end | | +--> color start | +--> size of gradient ellipse (x-axis, y-axis) +---> position of ellipse center 

It is easy to modify to make it vertical or implement it with: before or: after pseudo-classes.

Another example: a <hr> with a shadow: http://jsfiddle.net/sonic1980/65Hfc/

Answer 2

I have a suggestion that you do not need to use css3, you can use two different classes, one of them is normal, and the other is the background. And when you load the page, and call the js method, set the time to go to a few seconds, switch the class.

Answer 3

I think I just use the image and set the minimum height in the div :-)

 .column.right { padding-left: 30px; background: url(/img/shadow.png) no-repeat left top; min-height: 265px; } 

Answer 4

Another solution would actually allow the use of a dynamic height column, but it only supports IE8 +.

What would you do, apply a background-image located at the edge of the highest column. Then you can use the pseudo-elements :before and :after , set absolute positioning to top:0; and bottom:0 respectively, to set the "cap" in the shadow.

It makes sense? Here's a JSFiddle that shows it with a frame and text instead of images.

Of course, the height div parameter in the JSFiddle doesn't make any difference; it can be min-height or none at all. I just set it to give the div some size.