Nifty inset effect for divs

Just messing about with my stylesheets as usual. Always loved the CSS3 box-shadows and was looking for something to replace the lame blue borders I have on my divs. So I came up with a qickie universal box-shadow inset effect that can be applied to any div (indeed, any block-level element). It does not use inset so you won’t have to adjust your inner content, but it will take up more space around the div so you might want to watch your crowding. Anyway, here’s the code:

box-shadow: -4px 0px 4px 2px rgba(0, 0, 0, 0.25),4px 0px 4px 2px rgba(255, 255, 255, 0.25),0px -4px 4px 2px rgba(0, 0, 0, 0.25),0px 4px 4px 2px rgba(255, 255, 255, 0.25);

Since it uses only 25% black and 25% white as colours, it will go with pretty much anything. Of course play with the parameters and your background colours to suit your taste.

Comments are closed.