4 Border Shadow

[hp1]

Hello allI've tried everything to get a nice fading shadow type border like this www.on-one.co.uk.I'm pretty sure it involves using images somehow. I can get a drop shadow to work using the method on A List Apart but that only cover two sides and if you rotate you get a nasty line where the two images meet. Any ideas and advice would be appreciated. Many Thanks

[justsomeguy]

That site specifically uses a really big background image that is slightly bigger then the content and centers it, tiling vertically.

		background-image: url(images/bgfade2.gif);				background-position: center;		background-repeat: repeat-y;

novel idea..

[simplex.spes]

That site specifically uses a really big background image that is slightly bigger then the content and centers it, tiling vertically.

		background-image: url(images/bgfade2.gif);				background-position: center;		background-repeat: repeat-y;

novel idea..

That makes no sense... if the background image was just repeated vertically, then it would go on forever, not stop at the end of the content like it does at the website.Also, the background image must be of a specific height while the content is of a variable height, meaning that if there was a repeating background, there would be no way to ensure that the bottom of the content would match up with the background...However, to answer the original question, try an all-inclusive <div> with other, smaller <divs> with the background image for the borders.

[hp1]

That makes no sense... if the background image was just repeated vertically, then it would go on forever, not stop at the end of the content like it does at the website.Also, the background image must be of a specific height while the content is of a variable height, meaning that if there was a repeating background, there would be no way to ensure that the bottom of the content would match up with the background...However, to answer the original question, try an all-inclusive <div> with other, smaller <divs> with the background image for the borders.

Yeah i've been thinking about it since I posted and the best I could come up with is to have a div at the top and bottom to contain the 'ends' and then another div that contains the sides that would repeat in the Y direction that would hopefully meet seamlessly with the ends if cut from the same 'donor' image.

[Kingy]

Why not make a fixed background colour with css and then just make a separate container that goes on top of it? You can define your own container with it's own background colour and even define the style+colour of each individual border.Something like:p.textbox {border-style: dashed; border-color:#7D9858; background-color:#003300; }You then go to your html and use this or similar:<p class="textbox" width="60%">Something or other text.</p>

[justsomeguy]

That makes no sense... if the background image was just repeated vertically, then it would go on forever, not stop at the end of the content like it does at the website.Also, the background image must be of a specific height while the content is of a variable height, meaning that if there was a repeating background, there would be no way to ensure that the bottom of the content would match up with the background...

Actually, it does make sense, due to the fact that this is exactly what the site is doing. You can look at the code for yourself, you don't need to take my word for it.Here is the background image for the page that tiles vertically:http://www.on-one.co.uk/themes/on-one2/images/bgfade2.gifThen they have this image on the top:http://www.on-one.co.uk/themes/on-one2/images/bgfade2_t.gifand then this one on the bottom:http://www.on-one.co.uk/themes/on-one2/images/bgfade2_b.gifIt's all in the CSS sheet. Did you think I was just making that up?