New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The box-shadow shape is opaque behind the element background #12

Open
lojjic opened this Issue May 23, 2010 · 8 comments

Comments

Projects
None yet
9 participants
@lojjic
Owner

lojjic commented May 23, 2010

The draft spec (http://dev.w3.org/csswg/css3-background/#box-shadow) says that outset box-shadow rendering should only display outside the element's border-box, and be transparent behind it. This allows the element to have a non-opaque background and see through to elements behind it.

Currently PIE displays the box-shadow as a solid shape behind the element, so if the element has a transparent background then the view will be blocked by the box-shadow color.

This probably requires a way to mask the box-shadow shape with another shape equal to the border-box. Perhaps with the Compositor filter.

It seems unlikely that this will be a common problem in real-life designs, as usually when you have a shadowed element it has an opaque background color.

@jacobdubail

This comment has been minimized.

Show comment
Hide comment
@jacobdubail

jacobdubail Jul 31, 2010

Dang. This is exactly what I'm trying to do... only with an inset box-shadow. I'm implementing a non-inset shadow in IE, but would love to use an rgba value for the background: http://dev.jacobdubail.com/category/journal

Dang. This is exactly what I'm trying to do... only with an inset box-shadow. I'm implementing a non-inset shadow in IE, but would love to use an rgba value for the background: http://dev.jacobdubail.com/category/journal

@glodigital-michael

This comment has been minimized.

Show comment
Hide comment
@glodigital-michael

glodigital-michael Oct 8, 2010

It should be documented somewhere that you can only really apply box-shadow to elements with opaque backgrounds.

It should be documented somewhere that you can only really apply box-shadow to elements with opaque backgrounds.

@geerlingguy

This comment has been minimized.

Show comment
Hide comment
@geerlingguy

geerlingguy Nov 15, 2010

Just ran into this problem; I sometimes use a transparent background image on certain elements, and not being able to have a truly transparent background on box-shadowed elements is a bit crippling at times.

I've worked around the issue on a couple of my sites, but a few sites won't be able to use CSS3pie until this particular issue is resolved...

Just ran into this problem; I sometimes use a transparent background image on certain elements, and not being able to have a truly transparent background on box-shadowed elements is a bit crippling at times.

I've worked around the issue on a couple of my sites, but a few sites won't be able to use CSS3pie until this particular issue is resolved...

@kauffj

This comment has been minimized.

Show comment
Hide comment
@kauffj

kauffj Dec 22, 2010

I also just ran into this problem. I understand the difficulties involved in fixing this, but please add it to the docs at least. Thanks!

kauffj commented Dec 22, 2010

I also just ran into this problem. I understand the difficulties involved in fixing this, but please add it to the docs at least. Thanks!

@falemagn

This comment has been minimized.

Show comment
Hide comment
@falemagn

falemagn Mar 31, 2011

I actually need this feature, I have a transparent layer with a shadow, which is obviously not working in IE with PIE. I'll see if I can hack it up somehow, but I've never looked at PIE's code before nor I know anything about IE's internals, so it might take some time (which I don't have). If somebody has a couple fast pointers to where I should head to make this work, please adivse me!

I actually need this feature, I have a transparent layer with a shadow, which is obviously not working in IE with PIE. I'll see if I can hack it up somehow, but I've never looked at PIE's code before nor I know anything about IE's internals, so it might take some time (which I don't have). If somebody has a couple fast pointers to where I should head to make this work, please adivse me!

@Benjaminsson

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson Oct 4, 2011

+1 on what geerlingguy said

+1 on what geerlingguy said

@asgh

This comment has been minimized.

Show comment
Hide comment
@asgh

asgh May 8, 2012

I use jQuery animation to fade boxes in and out. After a fadeIn the box-shadow turns black, and no longer matches the background.

I'm OK if it has to ignore the opacity during the fade in/out animation, but once the animation is done it should fix the shadow since the background is no longer transparent.

I just realized this only happens on IE7, and not on IE8.

asgh commented May 8, 2012

I use jQuery animation to fade boxes in and out. After a fadeIn the box-shadow turns black, and no longer matches the background.

I'm OK if it has to ignore the opacity during the fade in/out animation, but once the animation is done it should fix the shadow since the background is no longer transparent.

I just realized this only happens on IE7, and not on IE8.

@justinhimt

This comment has been minimized.

Show comment
Hide comment
@justinhimt

justinhimt Dec 4, 2014

Check this one....CSS Transparent border with rgba

http://www.corelangs.com/css/box/transparent.html

Justin

Check this one....CSS Transparent border with rgba

http://www.corelangs.com/css/box/transparent.html

Justin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment