Skip to content
This repository

Feature: Implement inset box-shadow #3

Open
lojjic opened this Issue May 20, 2010 · 32 comments
Jason Johnston
Owner
lojjic commented May 20, 2010

Implement rendering of the 'inset' keyword in box-shadow.

Currently the code will allow this keyword when parsing but will not render it.

There is some partly-implemented code in BoxShadowRenderer.js, which no longer functions but at one point had a fairly good implementation for when the box is perfectly square (no rounded corners). Making this work with rounded corners will require a way to mask one shape with another, so we can create a border which gets blurred and then clipped to the shape of the padding-box. The Compositor filter may be an option.

jrmgx

Is it possible to activate the inset keyword rendering and specify in the doc that it will work well only into squared element ?
I think that's a better way than preventing any rendering.

What should I change for my personnal use to get this working ?
Thanks

Jason Johnston
Owner

The old code has been totally removed, because it didn't render accurately even in the square corners case, and used the blur filter which is horrible for performance. This needs to be rethought from the ground up.

Matthew Dean

I don't understand why this is so difficult. Say you want an element with a 5px inset shadow. Create a VML element 5px inside the target element, and give the new VML element a 5px outset shadow, only reversing the alpha / color darkness values. Done.

Or some other such method. Is it really such a challenge though?

thirdeyeblind82

I've the same problem! I can't see my inset shadow in a rounded div! :(
Hope that will be a solution early!

Adam Brenecki

@matthewdl Does VML allow for outset shadows that have, say, gradients or images, and so on?

Matthew Dean

I dunno, maybe I have to learn some VML and throw something into this project. :-)

tmikaeld

matthewdl: Please do if you have the time, text-shadow is very needed.

EDIT: Looking at CUFON, we might be able to use their method of creating text-shadow.

Jimmy Headdon

I'm really looking for an implementation of inset box-shadows in CSS3 PIE please! :)

Barry vd. Heuvel

Same for me, is there any progress on this issue? This would save me a lot of time/work for nicer css buttons in CSS3 (Like from http://www.cssbuttongenerator.com/ which is much nicer with the inset box radius)

Andrew Young

poke.

BMCouto

Important issue here. Any plans to implement this feature?

Jason Johnston
Owner

Of course I hope to be able to implement this. Unfortunately I've made several attempts and have not yet found a method that works in any but the simplest cases. The issue is the limited nature of VML gradients and the lack of a way to clip shapes to non-rectangles in IE. I will of course continue to try, but be aware that this may prove to be impossible.

BMCouto

That's too bad. Hope you can keep trying and find a way to implement it as soon as possible.

Matthew Dean

What about something other than VML's gradients? This might seem unconventional, but what about exploring something like VML extrusion? If you can extrude away from the visible object (into the bg), and if the extrusion could fade with a perspective distance, then maybe it could APPEAR to be an inset shadow as an optical illusion.

This is just a guess from poking around the VML documentation this morning. Not sure if it works that way in reality at all, but just tossing out ideas.

Jason Johnston
Owner

@matthewdl I'm open to anything that works! Extrusion is an interesting idea, I'm not sure if you can do the sort of fading you describe but let me know if you find otherwise.

Matthew Dean

Another idea: what about creating four elements, one on each side of the box, and creating a box shadow for each of them? Is that possible?

q13
q13 commented April 01, 2012

wait in hope

mcmwhfy

You can do it Jason, you did things much heavier than that :)

GertBoers

are there any workarounds available? I'd really like to have this...

Axle-Ryde

I've used border-image png with transparency for inset shadows where I need them in my projects, This is of-course not at all flexible if any properties change - border-radius, changing shadow properties, and you lose your CSS borders to the border-image. But it's a workaround to acheive a similar effect and at least there is still no extra markup.

If you're IE8+ then you could pseudo-element (:before + content) and style that with the border-image in order to save your regular element for normal borders. Just a few ideas - but all hacky workarounds . . .

GertBoers

Ok thanks, I'll give that a try!

Mike Turley

Has anyone been working on this lately, or had any success with workarounds?

Jason Johnston
Owner

@mturley No.

MinionMan

Thought:

Can you just do multiple background-gradients on the element in question? Render a gradient from [starting color] to [transparent] from each side depending on the shadow values. You should be able to round the corners with the background gradients, at least as far as I can tell with how PIE operates now.

Something using:
progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#ff000000, endColorstr=#00000000);

If this sounds really dumb, sorry I'm not terribly familiar with VML. But I do love PIE!

Jason Johnston
Owner

@MinionMan That's a good thought, and I've tried something along those lines. The difficulty comes when the gradient itself has to follow the contours of rounded corners, and is offset in some direction like most inset shadows in the real world are.

MinionMan

Hmmm square peg, round hole. I see the issue there...
What about (as terrible as it seems) offset elements of descending opacity with a colored border and transparent background? Not sure how the stacking works (elements cover text node?)

Or a single rounded element with a reversed outer-shadow (transparent inner to target color outer). The size and border-radius would have to be carefully calculated to match the parent element.

Mike Turley
MinionMan

@lojjic, you mention in the radial gradients:
"VML's "radial" gradients are actually square (they extend evenly from the edges of the shape's rectangle to the center). "
Could this gradient be used to create the inset shadow? If it's following the curvature of the element, and you can put a stop in, and use transparency.

Jason Johnston
Owner

Yeah radial gradients (actually "gradienttitle" gradients work better) are fine for when the shadow has no offset, but as soon as you have an offset (like most real-world inset shadows) then they don't work because you want them starting from somewhere different than the edges of the shape. VML gradients can't do that unfortunately.

It's actually pretty easy to handle inset shadows for the following cases:

  • shadows with no offset, even with border-radius
  • shadows with offset, if there is no border-radius

It's the combination of offset and border-radius that has always been the problem, and I've opted thus far to ship nothing rather than shipping an implementation that handles only those two limited cases. I could possibly be convinced to change my mind on that though.

MinionMan

Quite the conundrum... I'll keep thinking on it. While it would be neat to have either option, the combination of both is definitely the most common call.

Perhaps a stroke on the the outside of a sub-element that contains the gradient that is offset inside the element creating the rounded corners? So we end up with a "border" the width of the offset, to fill the empty space?

Wong Cupu

best solution don't used old browser :) :dancers:

s1h4d0w

I'd just like to mention that I too would love to see this implemented. I work for a company that uses CSS3PIE a lot and being able to use inset shadows would greatly improve the experience of visitors who do not use the most up to date browsers.

Buttons like these would be a breeze to make:
2013-10-10 11_54_01-button test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.