Home/ Questions/Q 8860779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:20:10+00:00

I am building a new site which has drop shadows on various page elements

  • 0

I am building a new site which has drop shadows on various page elements (boxes, inputs etc). The site as a whole needs to be the same across all browsers (back to IE7).

My issue lies with the best way to implement these drop shadows on many different elements on new and old browsers.

enter image description here

I am aware of the css3 solution with no images: box-shadow: 1px 1px #333 – but this won’t degrade well.

I don’t really want to use images for every element as we would be looking at 4 images per element and requests to the server and page load time would get ridiculous just for a simple effect.

Is it possible to even create a fallback say: If the browser doesn’t support box-shadow, use images? Only issue I see with this is lots of extra mark up which can make it harder to manage.

I guess the difficulty here is the requirement “I want it modern but to degrade nicely”.
What solution is best for me when implementing drop shadows (is there an alternative) ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use http://modernizr.com to detect if the current user using browser with css3 support but I think you better use the old way to make a box with drop shadow.

    You can make it with the “Sliding doors” technique for the top and bottom of the box and use another background image for the box itself.

    Anyway you can use CSS3 pie ( http://css3pie.com/) but I usually don’t like this plugin because it’s a little buggy sometimes and raise the browser performance needed.

    • 0