What’s pShadow?
pShadow, short for ‘paper shadow’, is a jQuery extension that adds realistic drop shadows to HTML elements, which works in Internet Explorer (IE8, IE7, IE6 with some clever trickery), Firefox, Chrome, Safari, Opera, and any other modern browser you care to mention. It’s free to download and use, and you can see an example on the demo page.
Cut to the chase – how do I get it?
Download pShadow1.0 and unzip it somewhere. You’ll see pshadow.js and 2 png images, and I’ve included the jQuery script too (but feel free to download it fresh from the jQuery site if you prefer).
In the <head> section of your HTML file, add the following lines:
http://jquery.1.x.x.min.js http://pshadow.js <script type="text/javascript"> $(document).ready(function() { $('.someElement').pShadow(); });
Now all elements in your markup with the class .someElement will have a lovely drop shadow!
The options
There is more than one way to skin a cat. By the same token, there is more than one way to use pShadow. Below are some options you can set.
There are 2 built-in shadow types, using one of the 2 .png images bundled in the zip. Choose which one you want to use by setting the type parameter to either ‘corners’ (default) or ‘middle’. See the demo page to see the difference.
$('#element').pShadow({type: 'corners'});
You can set how deep the shadow is, i.e. the vertical height of it, by setting the depth parameter to a number (assumes pixels).
$('#element').pShadow({depth: 30});
You can vary the strength (i.e. the darkness) of the shadow by setting the strength parameter to a value from 1 to about 5. See the technical stuff below for an explanation of what those numbers mean, but 1 is lightest and 5 is probably the highest you’ll need to go.
$('#element').pShadow({strength: 2});
And of course you can combine those options into one array, and even chain other functions on afterwards.
$('#element').pShadow({
type: 'corners',
depth: 10,
strength: 2
}).css('background','blue');
How it works
Okay, here’s the more technical low-down on how this all works, and what makes it so special.
We all know that modern browsers (apart from IE anyway) support the lovely CSS3 box-shadow property. But there are times when we need to cater for IE too, and sometimes a simple box-shadow just doesn’t cut the mustard. The pShadow jQuery extension does what all great performers do – it masters the art of illusion.
The shadow itself is actually a .png image, carefully designed to sit on the bottom edge of an element and give impression of depth and shadow, as if the element was a piece of paper sitting on your screen. No shadows are needed on the other edges, because the bottom shadow does all the work for you. Your eyes do the rest and turn it into a 3-dimensional object.
pShadow uses jQuery to take (nearly) any element, or set of elements, and dynamically adds the .png image to it, positioning it carefully so that it lines up with the bottom edge of the element. In the case of self-closing elements like <img />, pShadow adds the shadow element immediately following it in the markup, and positions it absolutely to the target element’s position on the screen. In the case of non-self-closing elements like
the shadow is added inside it and then positioned relative to the parent. Then it scales the width of the image to match the target object. And, to my knowledge, that can’t all be done purely with CSS.
The darkness of the shadow (known in the code as the ‘strength’) is a quick and dirty approach but generally works well. There is still only one .png image, but if you layer them on top of each other it gets progressively darker. If you leave the parameter to its default setting, or set it to 1, it will place just one copy of the shadow under the element. If you set it to 3, you’ll effectively get 3 shadows stacked on top of each other, making it darker. By my reckoning the scale can sensibly go up to about 5, although there is technically no limit. And if you want more control you can create your own shadow image that’s really really light and stack loads of them on top of each other, if you really want to…
Limitations
No, it’s not perfect. Yes, you can break it. No, I can’t guarantee to be able to fix every issue you have with it. Here are some things I’m already aware of:
- PNG images are not totally supported in IE6, because it forgets to take transparency into account. However, there are a number of ways to force IE6 to do transparency, so do a Google search for “IE6 transparency” and use any of the solutions there!
- If you apply a shadow to a self-closing element like an image, and then move the position of that element, the shadow won’t follow it. Because the shadow is positioned absolutely to where the target element was relative to the page, if you then move the target element the position of the shadow would need to be updated too. That’s beyond the scope of pShadow at the moment.
- If you have CSS targeting images, there’s a possibility that you might affect the shadow elements too. I’ve tried to cancel out some typical CSS parameters, but it’s no silver bullet, so beware.
- pShadow doesn’t take into account rounded corners, so if you’re using a hefty rounded corner on an element then the shadow might look a little odd. Tough luck, I’m afraid.
- Also, pShadow doesn’t currently handle nested pShadowed elements perfectly. Hopefully that’s something I’ll find a fix for though!
Frequently Asked Questions (or at least questions that I imagine might be asked frequently)
Is pShadow free?
Yes. It is. And always will be.
Do I have to use jQuery?
Yes. Technically you could achieve it all in raw Javascript, but it wouldn’t be as elegant, nor anywhere near as easy to use. And I have no plans to convert it to use any other Javascript framework.
Can I apply pShadow to any element?
Yes. But I can’t guarantee it’ll work in every case. It’ll definitely work for <div>, <p>, <h1> etc, <img>, and any other element that a browser will treat as if it’s a block element like <div>. It won’t work quite right with <input>, <textarea>, <button> yet, but that might come later. And I’m sure you’ll all tell me if other elements don’t work either.
Can I use pShadow?
Yes. You can use it on your personal blog. You can use it on your company website. You can use it on your corporate intranet. You can use it in your web application.
However, you can’t use it on your oven. Or your car. Or your girlfriend. Or your sense of pride. Or the sunset.
What happens if I have a problem with pShadow?
Leave a comment below and I’ll see what I can do to help. Unfortunately I have a 9 to 5 job to attend to, so I can’t provide unlimited tailored support, and you can’t employ my services either, even for money.
When is the next version of pShadow due?
It’s not. Not as such. This is a little personal project of mine, initially knocked up in an afternoon. I hope to find time to tweak it as necessary, as and when people point out critical failures, but there is no roadmap for development.
Matthew Dawkins 
I was looking for the tecnique and this is the only one I could find.
The first thing you notice is that when the maximise button is pressed on a maximised window, the ‘shadow’ isn’t where it should be, looking like a big line of dirt that requires vaccuuming..
If you got this far I’m sure you can fix this
LikeLike
Also, you can’t use the same div twice for the same shadow so reusing code eg .box1 is not an option
Having said that, with a few tweaks it should be okay.
LikeLike
Hi John, thanks for your comments. Regard the maximising issue, yes that is a problem because the position of the shadow is calculated absolutely – if you change the size of the viewport, the absolute position of the shadow may no longer match the object it was originally assigned to. The only way to remedy that would be to somehow detect when the viewport changes size and re-place the shadow…
As for your other comment about reusing code, I’m not sure I understand, could you provide a more detailed example perhaps?
LikeLike
Thanks, it has been very useful to me.
LikeLike
Hi, Looks like when I try to do it on a div with overflow:hidden, it does not work.
LikeLike
Really interesting, but it doesn´t work for me.
When I try to see the shadow the browser looks for the .png images in a wrong places.
Where should I put the images?
LikeLike