Re: Implementation of Inset Box Shadow on image elements

+1, replacing an image by a background is not
a good idea. BTW, with an IMG you can infer
size from the image file, something you can't
with a background.

It would be better to change the spec and modify
the behavior of the inset shadow applied on
replace elements like img's.

(BTW, it's a web author point of view, I'm not
browser implementer)

Regards,
François

-----Message d'origine----- 
From: Mike Taylor
Sent: Tuesday, July 27, 2010 8:30 PM
To: Brian Manthos
Cc: divya manian ; " <www-style@w3.org>
Subject: Re: Implementation of Inset Box Shadow on image elements

  On 7/27/10 2:19 PM, Brian Manthos 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

What about alt="" text, now that it's a background image? This feels
more like a hack, rather than a viable solution.

-Mike

> -----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:40:00 UTC