When box-shadow got added to the CSS spec, I didn’t realize how powerful it would be. Having the ability to combine multiple shadows together can create all sorts of interesting effects.
On the first iteration of my blog, I used some presentational markup and
:after psuedo selectors to create a “stacked” look on the articles.
I recently reworked it to only use one element and a couple box-shadow declarations. This is tested in Chrome, Safari, Firefox, and IE 9+.
Check out this Pen!
Note: The trick is to use
inset on the box-shadow declarations. It’s strange to think of the box-shadow being inside the element, but in order for the div border and box-shadows to line up you need work the shadow this way.