Shadow along the top edge of the website, like this:
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}Top Shadow
Chris Coyier
on
(Updated on )
yeah, but browser slow down if use position:fixed on site with content. maybe you know reason?
I did some testing with that and didn’t seem to find any slowdown. Do you have a test page showing the problem?
No, i try add code in my site with other content & get slowdown, i think code with position: fixed; work fine if is demo page with no-content )) in real sites it slow.
With content, with scrolling: http://jsbin.com/ejora3
No slowdown.
What matters is doing tests. Make a test page with different content that DOES slow it down, and we can troubleshoot from there.
“Reduced Test Cases” https://css-tricks.com/reduced-test-cases/
Go to my home page please, you see. With other skins for cms it works fine.
Scrolls fine for me. If it doesn’t for you, that means it’s either 1) the browser/version 2) the platform/version 3) your computer in general and all of that in conjunction with the HTML/CSS/JavaScript on your page. That’s the point of the reduced test case. Add the top shadow, experience slowness, remove things from the page slowly until it fixes the problem, then that was the thing that was causing the problem. Or do it in reverse, add the top shadow, then add things back into an otherwise empty page until it breaks. The last thing you added is the problem.
I use different browsers for testing on machine with 1GB of memory & Win-x64. Opera -11 (very-very slow), Safary (no smooth scrolling) =( Thanks for any way. Thanks anyway. I’ll try to find the cause.
I’ve found. lot of text-shadow on my site for any text. Sorry, it is my fault
even mine slowed down i use firefox latest version but in opera its super fast
It works damn fine at my side should i use it or not
If I wanted to do the same type of shadow but coming up from a full-width , what would the change be?
Is there an easy way to accomplish on the bottom side as well? Love the effect.
If you want it at the bottom of the page –
Hey, thank you very much for that trick! I love it (and use it until now).
Nicely done! I like this.
This is a very nice resource, i will use it as soon :)
Great work,
thx it works perfectly.
wise
Hi Chris
Great job ( as usual.)
One small but important question though.
When browsers ( that support box-shadow property ) render the shadow, it automatically draw the shadow pixel by pixel and then repeat it, and the same in the case of text-shadow too.
Am I correct ?
If so, in the exact same setting, a page with many elements styled with shadow-thingy will render slower than a page without those shadows.
The time taken to render those shadow will not be that much different, unless it gets to a certain point ( which vary by RAM/ browsers and a few others )
Am I correct ?
I would even to this to make the left and right edges of the shadow go all the way to the end rather than drop off slightly.
body:before {
content: "";
position: fixed;
top: -10px;
left: -10px;
width: 110%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
Not totally noticeable but just one of those pixel perfect things.
I had seen this here: http://playground.genelocklin.com/depth/
And im still unsure as to how they make it work on IE7 – IE8, any ideas ?
I got it to work by adding this Browser checking php code, and some conditional statements to check if IE is being used. In the case of IE, I have the code add a for the shadow as the first element inside the tag, and style it from there using a transparent div. An ugly solution to be sure..
D’oh; typos – and I forgot that certain tags get stripped out of comments. It should read: “In the case of IE, I have the code add a tag as the first element inside the tag, and style it from there using a 1px by 10px transparent .png file with repeat-x applied”
Wow – even with the tags spaced out, they still get stripped..ok…well, no less-than signs from now on:
“In the case of IE, I have the code add a [div] tag as the first element inside the [body] tag, and style it from there using a 1px by 10px transparent .png file with repeat-x applied”
Thank you very much for this awesome solution to value up the feeling without spending too much space for effects.
Hello, Friends!
This topic helped me when I cast a shadow on an element with
position: fixed, like the google forum (http://groups.google.com/a/gcoogleproductforums.com/forum/#!overview).A hug from a Brazilian friend!
I have a header set at 1024 and moves to centre of page depending on width of browser.
How would you centre the drop shadow. at a fixed width of 1024?
I found that it works better if you are viewing it from a host and not your actual computer. I had a document saved on my computer and viewed it and it would lag, then I had it on a host and it didn’t lag, or at least a noticeable lag. It’s good to have a slow computer handy to test web pages on, slower then what the majority of people have today.
I’m not quite sure how to explain this, it may be the computer I was testing on but it works faster from a host.
What a beautiful, yet subtle, effect. Using this one on a school project right now and I’ll be saving this little gem for a couple more down the road.
Thank you very much!
If you want to apply to another element than the “body”, most likely it will be misaligned. Here’s the trick of how solved this problem, add this:
.element:before {position:relative; // not fixed
top:-20px;
display:block;
}
And in the parent element, set the relative position.
Once again… THANK YOU! No fluff, just solutions. You’re the best!
How would you modify this to have shadow at the top and left side at the same time?
Think I’ve got it. Needs body::after
body::after {
content:””;
position:fixed;
top: 0px;
left:-10px;
width: 10px;
height: 100%;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}