Mon, 2010-01-11 13:25
Hi everybody!
I have a 80% wide container and I want to add shadows (using images) on both sides. I could but I do not want to use the onionskin
http://www.alistapart.com/articles/onionskin/
and if the width of the container would be fixed in px the there would be no problems to do that but I want my site to be fluid.
is there a way to do it?
Mon, 2010-01-11 22:16
#1
tiled images
Hi Borkoff,
Here's an idea... try making a tiny image in Photoshop (a few pixels wide by one pixel in height) of the edge of your container with a shadow... then make an identical one for the other side, and just add those on either side of your container. Then just repeat it vertically, tiling it the whole way down the length of your container.
Tue, 2010-01-12 10:13
#2
Lambinastormtroopersuit is
Lambinastormtroopersuit
is there realy a posibility to add two background pictures at the same time?
I could also make a 1600px wide and 1px high picture and strech ir to 100% accross all the container.
my first thougt was to make 3 divs 100% in high and with container in the middle. then to add those little shadow pictures as a background to those divs on the both sides of the container but that makes a problem that when the content of the container exceed the 100% height and the scroll appears, the shadow on the divs on both sides does not continues way down but is wtill only 100% high(in the height of the screen not all the document)
however that may be I have gound two very good solutions for my problem:
1)http://www.visibilityinherit.com/code/shadow-fluidwrapper.php
2)http://www.css3.info/preview/box-shadow/
Tue, 2010-01-12 14:31
#3
I wasn't thinking two
I wasn't thinking two background images, I meant more in terms of a wrapper. Your idea of doing a 1600 px wide and 1px high image would work too. You definitely don't want a scroll in there, it would ruin the look of it. Just have the container stretch down as far as the content goes. If you don't want the viewer to have to scroll the browser back up to the top, just put a little "back to top" button at the bottom of the page to make their life easier.
Out of the solutions (1 & 2) that you added, I liked the first one (shadow-fluidwrapper.php) as it had exactly the effect that I think you wanted. The second one didn't work for me so much because it actually didn't appear to be working correctly when I viewed the page. Near the second grey box, it said "There should be a hard black shadow above this one, following rounded corners blah blah" but when I viewed it, it wasn't there... there was just a plain grey box with rounded corners.
Regardless, it looks like you've got a few good solutions that will work well.