[CSS4] box-shadow and box-shadow inset

After reading the 'Minutes and Resolutions Oslo F2F 2010' I still do 
not like the current proposal. I believe that CSS4 Backgrounds and 
Border should be moved to CR and that box-shadow should be shipped 
without vendor prefixes.

My question is how does one apply a box-shadow and box-shadow inset on 
the same element? The following just doesn't work.

div {
   width: 100px;
   height: 100px;
   box-shadow: inset 5px 5px 10px black;
   box-shadow: 5px 5px 10px black;


<div>A box situated in Seattle</div>


CSS4 [1] does not mentioned box-shadow and CSS3 7.2. The ‘box-shadow’ 
property [2] says this.


   | The ‘inset’ keyword, if present, changes the drop shadow from
   | an outer shadow (one that shadows the box onto the canvas, as
   | if it were lifted above the canvas) to an inner shadow (one
   | that shadows the canvas onto the box, as if the box were cut
   | out of the canvas and shifted behind it).


Looking at the discussion that took place in Oslo, it seems that there 
is agreement now that box-shadow inset operates on a different 
stacking level than box-shadow. This is something I mentioned in 2008 
[3]. Back then I suggested having for an inset 'box-highlight' which 
would allow this.


div {
   width: 100px;
   height: 100px;
   box-shadow: 5px 5px 10px blue;
   box-highlight: 5px 5px 10px black;


<div>A box situated in Seattle</div>


We can have box-inset. I am just saying that that having a box-shadow 
and box-????? on the same element would make everything look super cool.



1. <http://dev.w3.org/csswg/css4-background/>
2. <http://dev.w3.org/csswg/css3-background/#the-box-shadow>
3. <http://lists.w3.org/Archives/Public/www-style/2008May/0221.html>



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 1 September 2010 10:44:35 UTC