RE: Implementation of Inset Box Shadow on image elements

Try this:

<section><i><div style="width:300px;height:335px;background-image:url(http://dl.dropbox.com/u/952/pola/pola.jpg);background-size:100% 100%;box-shadow:inset 2px 2px 10px black;"></div></i></section>

-Brian

-----Original Message-----
From: Brian Manthos 
Sent: Tuesday, July 27, 2010 11:14 AM
To: 'divya manian'
Cc: www-style@w3.org"
Subject: RE: Implementation of Inset Box Shadow on image elements

That's correct.  Because the first image is completely opaque so it blocks the shadow or backgrounds from bleeding through.

To accomplish the effect you're wanting, I would switch from an img element to something like a div element with style="background-image:url(pola.jpg);" and move your inset box shadow style to that div.  I believe this will accomplish your desired rendering of { outset shadow, image, inset shadow } bottom-to-top even for your transparency-less image.

-Brian

-----Original Message-----
From: divya manian [mailto:divya.manian@gmail.com] 
Sent: Tuesday, July 27, 2010 10:43 AM
To: Brian Manthos
Cc: www-style@w3.org"
Subject: Re: Implementation of Inset Box Shadow on image elements

On Mon, Jul 26, 2010 at 11:46 PM, Brian Manthos <brianman@microsoft.com> wrote:
>
> I recommend exploring some more with your sample, because what I'm seeing is the opposite of what you're describing.
>
> Namely, if I add
>        style="background-color:red"
> to your second 'img' element it seems to me that (1) the box-shadow is above the red coloring and (2) it appears that your image transparency for the second image is leading you to the wrong conclusion about how the browsers are behaving.
>
>                        <i><img class="img" src="http://dl.dropbox.com/u/952/pola/pola.jpg" alt="Pola" style="background-color:red"></i>
>                        <i><img src="http://dl.dropbox.com/u/952/pola/pola-trans.png" alt="Pola" style="background-color:red"></i>
>
> Also, consider changing your the styling of box-shadow for img to
>        box-shadow: inset 200px 200px 10px black;
> and you'll see that the portion that would otherwise be entirely black is not so, because the image is on top.
>

But these changes have no effect on the first image.
http://gyazo.com/8f44950ddb7a2eefb555311d7c88e026.png


I am not clear what you mean by "leading you to wrong conclusion about
how the browsers are behaving". Could you link to a screenshot that
explains it?

Received on Tuesday, 27 July 2010 18:19:55 UTC