WebKit’s Mask-Box-Image

Screenshot of webkit-box-image in use on Google Analytics
Note the subtle elliptical shadow under the search box.

This was a little, rounded shadow at the top of a sidebar in the Google Analytics dashboard. I had done something similar that required a little more code so I copied it to see if it could be made more browser independent.

They were using some JavaScript to show or hide it depending on the scroll position in the element, similar to what I did before as well.



Anyway, here’s the code:

And here’s the result:

Sample file webkit-mask-box-image not found.

Please notify the administrator.

Seems to be reasonably supported by the most modern WebKit browsers and the fallback to a simple gradient in Mozilla and IE is not that bad. I suppose if you were wanting to be thorough you would create an image mask for those browsers that might be supported.

Share

Comments