RE: Implementation of Inset Box Shadow on image elements

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.

-Brian

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Brian Manthos
Sent: Monday, July 26, 2010 11:37 PM
To: divya manian; www-style@w3.org"
Subject: RE: Implementation of Inset Box Shadow on image elements

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>  

-Brian

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of divya manian
Sent: Friday, July 23, 2010 6:25 PM
To: www-style@w3.org"
Subject: Implementation of Inset Box Shadow on image elements

http://dl.dropbox.com/u/952/pola/index.html


I have submitted this as a "bug" to all major browsers [1], but given
that all browsers implement it this way, I think there needs to be
clarification in the spec.

Basically, the inset box-shadow in the spec is to be rendered in this way [2]:

"The shadow effects are applied front-to-back: the first shadow is on
top and the others are layered behind. Shadows do not influence layout
and may overlap other boxes or their shadows. In terms of stacking
contexts and the painting order, the outer shadows of an element are
drawn immediately below the background of that element, and the inner
shadows of an element are drawn immediately above the background of
that element (below the borders and border image, if any)."

But in the case of an image element, I think it makes more sense to
render the box-shadow ABOVE the image itself, rather than behind it
(as the latest betas of Opera/IE/Safari/Chrome/Firefox are doing,
check the above URL, where the translucent image on the right shows
this).

There are several use cases for box-shadows on images, one of which is
outlined in the URL above, and to replicate the same effect requires a
wrapper HTML element and at least 13 more lines of CSS.

I think the "expected' behavior would be that the box-shadow render
above the image than under it.

- Divya


[1] Mozilla's bug report explains this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=581601

[2] http://dev.w3.org/csswg/css3-background/#the-box-shadow

Received on Tuesday, 27 July 2010 06:46:41 UTC