Was messing about with box-shadow while developing a customer site by adding 500000px as the spread radius.
The result is quite cool – obviously the box-shadow blur and spread don’t need to be quite that big, but this might be handy if you want to focus attention on a particular section of a site when someone hovers over it, effectively fading out the other content.
Something important to keep in mind: box-shadow is one of the slowest CSS properties to render. It isn’t too bad in small amounts, but with such a monstrous spread value, it is going to cause some slower machines to suffer :(
Actually, it still flashes, but very quickly. It’s much better, but still not completely right. So if you want to avoid every flashes, you might want to remove gaps between columns : http://jsfiddle.net/weYYR/6/.
1. We use an extra element to achieve this effect (.mask).
2. We can’t set position: relative to the wrapper (.container), or the mask will only cover the wrapper, not the whole page. The solution would be to move the .mask from the wrapper to the body tag, but we won’t be able to target it with the sibling selector (.column:hover ~ .mask).