CSS box shadows beneath shapes
So you’ve got used to using the CSS ‘box-shadow:’ property to add a bit of depth to your interface; but then go to apply it to your funky CSS shapes and transparent PNGs and realise you’re up shit creek. Well then… read on.
Using CSS to render triangle shapes (rather than inserting additional image sprites) is pretty neat. It reduces HTTP requests to your server, is much easier to make changes in the future and well… it’s just better. But something I’ve always found annoying is how the ‘box-shadow:’ CSS property doesn’t consider abnormal shapes, so you’re left with a shadow-less triangle. Until… well I don’t know when exactly. The following is something I’ve recently stumbled upon, and me likey!
There is another new experimental property you take advantage of, and that’s ‘filter: drop-shadow()‘. It’s not going to work in all browsers; only WebKit browsers at this stage, but you could always use good old ‘box-shadow:‘ as a rollback with some Modernizr magic. Anyway, simply pass the filter your normal ‘box-shadow’ values and hey presto!… shadows appear beneath your CSS shapes. It should also work with transparent PNGs.
So as an example, you can use it like this (including vendor prefixes):
-webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
So lets try it out. The following example is all elegantly styled using CSS, and will render a nice drop-shadow beneath the shape on browsers that support ‘filter: drop-shadow()‘.
For more information check out Bricss‘ well explained post: Box-shadow vs filter: drop-shadow
If you haven’t got your head around CSS triangles yet, check out the following great resources:
Updated:
