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

RE: Implementation of Inset Box Shadow on image elements

From: Brian Manthos <brianman@microsoft.com>
Date: Tue, 27 Jul 2010 06:36:32 +0000
To: divya manian <divya.manian@gmail.com>, "www-style@w3.org\"" <www-style@w3.org>
Message-ID: <FA122FEC823D524CB516E4E0374D9DCF0F29030F@TK5EX14MBXC140.redmond.corp.microsoft.com>
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:37:06 GMT

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