W3C home > Mailing lists > Public > www-style@w3.org > July 2010

Re: Implementation of Inset Box Shadow on image elements

From: Mike Taylor <miketaylr@gmail.com>
Date: Tue, 27 Jul 2010 14:30:15 -0400
Message-ID: <4C4F25B7.6010905@gmail.com>
To: Brian Manthos <brianman@microsoft.com>
CC: divya manian <divya.manian@gmail.com>, " \" <www-style@w3.org>
  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:30:49 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:29 GMT