4 sided container shadow, with 1 image, can you do better? Here is test page. Mainly, I’d like to be able to get rid of the negative margin on the Content div (i.e. Content{margin:-11px;} ). I rather not have to suck the main content back up in order to bring the border flush with the shadow. See a way? Or, can you clean it up at all?
Back story: When I work on a site for a client, I try and code it so that I can easily make changes along the way (as colors change) without having to go back and recreate the image. Some times this is possible, sometimes not, frustrating regardless! So, working off of what Erik-J posted a while back, I’m trying do do this one size fits all container shadow. Thanks!
PS: The image is 1000px X 5000px, and the container is % based so you can see it in action. On the clients site the container will be a fixed width.
Eric, I’m afraid I don’t have a brain for this sort of thing, unlike you.
But just to annoy you, (and to get my revenge), let me post the following code. (View in Firefox or Safari, if you dare… )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shadow</title>
<style type="text/css" media="all">
#outer1 {
-webkit-box-shadow: -3px -3px 8px #aaa;
-moz-box-shadow: -3px -3px 8px #aaa;
box-shadow: -3px -3px 8px #aaa;
margin:40px auto;
width:70%;
}
#outer2 {
-webkit-box-shadow: -3px 3px 8px #aaa;
-moz-box-shadow: -3px 3px 8px #aaa;
box-shadow: -3px 3px 8px #aaa;
}
#outer3 {
-webkit-box-shadow: 3px -3px 8px #aaa;
-moz-box-shadow: 3px -3px 8px #aaa;
box-shadow: 3px -3px 8px #aaa;
}
#content {
-webkit-box-shadow: 3px 3px 8px #aaa;
-moz-box-shadow: 3px 3px 8px #aaa;
box-shadow: 3px 3px 8px #aaa;
border:1px solid #333333;
min-height:0;
padding:20px;
text-align:justify;
}
</style>
</head>
<body>
<div id="outer1">
<div id="outer2">
<div id="outer3">
<div id="content">Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci ipsum tellus convallis tincidunt sapien est. Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci ipsum tellus convallis tincidunt sapien est.</div>
</div>
</div>
</div>
</body>
</html>
Hi Ralph, revenge, why? I don’t have the brain for this sort of thing either. I have educated guesses, and just keep throwing numbers at it until I find something that works.
Nice! That’s identical to mine (without an image). Although, needless to say, I need it to work in IE7/8. Thanks for that though!
It’s a shame CSS3 implementation is coming along so slowly, as it would make life a whole lot easier. But I’m sort of resolved to use it where available from now on, and just let IE users go without.
I know when I do 4 sided images (dropdhadows in this case), I like to keep the iamges in empty divs and just AP them into place.
Yea you gotta slice the image but it’s soo easy.
True, but, that’s the thing see. If your building it for yourself, then you know the colors, size, style, you want to use. I need to get better with Photoshop - then I just make a quick pic. But in the meantime, it’s time consuming to code a layout, present to the client, and then they want to change this and that. Now you have to go back and remake the images to their specs. Not to mention IE6! When using shadows, it’s best to not use pngs for her obviously. So you would use a solid color background behind the shadow when making the shadow. But what color do you pick when you for see the client changing their mind. See! There in lies my frustration. So, doing it this way, I at least dont have to change the shadow graphics.
Well in that case use nested elements with each one getting a small 5px wide image or w/e and just repeat it.
Give the outer most container some padding to get away from the image and bingo.
Hi Eric,
Just a shot in the dark here. If I set a dark BG color on the body it shows me where the shadow image begins (as long as the #fff bg color is left on the #a-#d divs)
It looks like there is about 11px-12px worth of non-shadowed space on all four sides of the image. If you were to trim that away would that not allow you to change all your 30px values to say 19px (or whatever the difference is).
This kinda works but it slightly distorts how the round corners meet. I think that is due to that non-shadowed margin on the image, it might work if the image was trimmed by 11px on all four sides.
Hey Ray - good job! Yup, 19px/-19px was the magic number I came to also. But, like you found, that distorts the shadow slightly. That’s a good idea, I’ll trim the image by 11px and see where that gets me…
I played with Big John’s code a few days back, seen here http://www.positioniseverything.net/articles/dropshadows2.html and thought it seemed a little more complicated. But John just pointed out to me (because of my instigation) why his method is superior.
I didn’t notice before, but my link needs a solid color background on all the nested divs in order to work. That means that, while my posted code may be simpler, it only works on solid color backgrounds. Still a solid technique, but not good enough. So I’m moving back to John’s code, so I have the flexability to put the shadow on any color backgrounds (gradients, patterns, etc). Now off to try and wrap my brain around it…
The element can be any colour and so can the background unlike your method which needs a solid background of the same colour. There are no extra elements from yours either.
Ray, I trimmed the image, but all it ended up doing was changing the number values. Unfortunately it didn’t enable me to remove the negative margin - good idea though. No biggy - I’m fine with it!
One snag though… your code Paul, has the same little bug in Opera that Eriks Inspired roundbox code did. When you increase or decrease the windows width, the top left corner peaks out at different widths. My solution for Eriks code was to add another div (and maybe some other stuff - don’t remember). Can you see an easy fix for yours Paul? Thanks a million!
Eric, I went to Pauls sollution and changed the width of the window and I didn’t see anything sticking out.
I know when Eric J made his rounded corners box a few months ago Opera would be flaky with the width and that was because the inner box was (or wasn’t, I forget) floated.
I didn’t test to see if it would work becausse I didn’t see it in the first place.
You never see it LOL. It’s a percent width. Just drag the window (in Opera) left to right/right to left. It appears at different widths. I looked, Pauls demo does it also.
Yes opera is a pain and has always been bad with percentages ever since I can remember. The only way around it that I can see is by changing it a little and adding one extra element.
That seems to work in opera but with the only caveat is that the percentage width is controlled by another parent wrapper. If you add a percentage width to the first element it doesn’t seem to like it but If you wrap it another float with a width then all is fine.
Hmm. Like Ryan I can’t for the life of me see this effect happening in Opera. Both examples work flawlessly. I’m using Opera 10.00 on Mac. Just thought I’d mention it.
Ah, ok, I see it now. My screen wasn’t quite wide enough for it to happen, but when I moved the browser window off to the left of screen and widened further, yours started to break up along the top right and bottom left.
)