Code Snippet
Top Shadow
Shadow along the top edge of the website, like this:
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
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;
}
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” http://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
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 -
body:after {
content: “”;
position: fixed;
bottom: -10px;
left: 0;
width: 100%;
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;
}
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 ?
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.