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:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/jhixon/public_html/wp-includes/functions.php on line 3722