Re: Implementation of Inset Box Shadow on image elements

On Tue, Jul 27, 2010 at 11:19 AM, Brian Manthos <brianman@microsoft.com> wrote:
> 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

Brian

The reason I posted here was I think it is practical to have inset
box-shadow ON TOP OF the image rather than below the image, despite
what the spec says. I think for image elements inset box-shadow is not
practical otherwise. inset box-shadow would be of great use if only
for this issue.

Using image as a background is not an accessible way of doing so,
neither is it clean. I think this will result in convoluted solutions.

My view is, the spec should be altered to allow image  to show below
an inset box-shadow when an inset box-shadow is specified on the image
element. There is no use-case for the other case where the inset
box-shadow is behind the image.




> -----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:30:21 UTC