RE: Implementation of Inset Box Shadow on image elements

What I offered was *an* option, not the only option.

- Brian


> -----Original Message-----
> From: François REMY [mailto:fremycompany_pub@yahoo.fr]
> Sent: Tuesday, July 27, 2010 11:39 AM
> To: Mike Taylor; Brian Manthos
> Cc: divya manian; CSS 3 W3C Group
> Subject: 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 19:02:48 UTC