CSS3 Box shadow size – percent units?

Question

I\'m working on a project that needs to use CSS3 box-shadow property. That\'s fine, but I have found out that spread size of shadow can\'t be set to a percentage of parent objec

Answer 1

Do you want the box-shadow to scale with the width of the container or with the height of the container? You can't really specify a height and width of your shadow, only a spread. So if your container shrinks by 10% in width but does not shrink in height then your shadow will shrink by 10% (if it were possible), i.e. your shadow's height would scale even though it probably shouldn't.

If you want the box-shadow to actually scale correctly with regards to height and width, you would have to create multiple shadows - one for height, one for width.

However, you will never be able to scale the actual shadow, only the container of the shadow. So you would create a container inside your main container and then give it negative margins and attach the box-shadow. However, you will soon notice that your shadow actually grows instead of shrinking when you scale the container down.

Seems a bit overkill to try and scale something which isn't scalable without using media queries or jQuery.

However, if you're looking for scalable borders, i.e. box-shadow without blur :P, then look no further:

http://jsfiddle.net/925r2/3/

    

    
This is your content