Coming from a graphic design and video production background, I’m used to using drop shadows and personally love them (despite the criticism they can get from some… So the day I learned that you can do these in CSS, I about feel over! How cool! And when you are asked to do a design change, bam it’s done in the code, not re-editing countless images, hoping that your CDN and browsers don’t cache the image for too long, or maybe you should use a new name? Too much headache.
Anyway, I wanted to post just a few cool resources for CSS shadows. I’m not the expert and am not going to claim that I am, so just posting links to those who are true authorities on the subject.
Keep in mind that CSS shadows are part of the CSS3 spec, so not all browsers will work with these, but thankfully all modern browsers are now compliant.
One thing of note though, you’ll see some CSS properties have the -webkit- or -moz- prefixes. These are actually legacy properties that support older Webkit (Chrome, Safari) or Mozilla (Firefox) browsers. To ensure optimal browser compliance, I’d suggest using them still, but just saying technically they are going away – for some CSS properties at least. Here is more info about that though from someone you knows more of what is going on than me.
Do I need the moz and webkit css prefixes?
CSS Box Shadow
CSS Text Shadow
CSS Inner Shadow
Layering a CSS Inner Shadow over an Object like an Image
