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

I have found out that spread size of shadow can't be set to percentage of parent object

True. But you can set font-size on the parent object, then define the object size in ems, and use the same ems to define the box-shadow size.

Or, if your parent object happens to be the window, you can use viewport units: vw and vh.

Answer 2

If you're after an inset box-shadow you could use a radial-gradient background to mimic the behaviour. So instead of -

box-shadow: inset 0 0 100% #000;

You would use -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

Support: FF16+, IE10+, Safari 5.1+

I can't find any definitive answer on when Chrome started supporting the property, but my current version (39.0.2171.65) definitely supports it.

ColorZilla is a pretty useful tool for generating radial (among other) gradients along with the necessary prefixes if you decide to go down this route.

Answer 3

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/

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    .wrapper {
        position: relative;
        margin: 100px auto 0;
        width: 80%;         /* .content width */
        height: 400px;      /* .content height */
    }

    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;   /* .content background */
    }

    .shadow {
        position: absolute;
        top: -10%;          /* .content shadow top height */
        right: -5%;         /* .content shadow right width */
        bottom: -10%;       /* .content shadow bottom height */
        left: -5%;          /* .content shadow left width */
        background: #000;   /* .content shadow, unfortuntely no blur effect */
    }
</style>

<div class="wrapper">
    <div class="shadow"></div>
    <div class="content">This is your content</div>
</div>

Answer 4

If the element has a defined width (except for a percentage width), you can create a custom property for the width and then use the custom property with the calc() function for box shadow.

For example, the CSS code below makes the "spread radius" of box shadow 20% of the div's width:

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}

Answer 5

Have you tried using the rem unit (root em unit)? I believe you can use this to make it scale fluidly.

The rem unit is always relative to the root html element, so it will scale accordingly and you don't have to worry about inner containers or anything like that. It also has pretty broad browser support at this point.

I use it on my projects to make them more responsive, but always follow a parameter already defined by px or em so that it fails gracefully just in case. For example:

font-size: 14px; font-size: 1.4rem;

Here's a great article explaining everything you need to know about this unit: http://snook.ca/archives/html_and_css/font-size-with-rem