CSS3 Box shadow size – percent units?

css percentage box-shadow
Jozko Remen picture Jozko Remen · Dec 27, 2012 · Viewed 24.6k times · Source

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 object.

I fully understand that box-shadow is not additive, thus it doesn't take the size of a parent as a reference.

But given the fact that I need to have a fully responsive site with objects scaling fluidly (not only on breakpoints), but this also poses a problem – I can set shadow to spread property only in absolute units (em or px).

Is there any solution to this? I thought about using inner container (for content) within container (for "shadow" – it's without blur), but this creates another problem – vertical centering of inner container.

Any solution? No jQuery please, just pure CSS.

Answer

mik01aj picture mik01aj · Nov 23, 2015

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.

Related questions

Div Height in Percentage

Possible Duplicate: Percentage Height HTML 5/CSS This needs to be a simple one but I why the height specified in percentage for a div is not apply to it. For example: <div class="container"> adsf </div> …

Read More
Height 100% on flexbox column child

I'm having troubles with a flexbox column in that children of the flex'd element don't respond to height in percentages. I've only checked this in Chrome, and from what I understand it's a Chrome only problem. Here's my example: HTML &…

Read More
Translate X and Y percentage values based on elements height and width?

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am …

Read More