Re: [css3] support for filters

On 6/01/2011 4:13 PM, Rik Cabanier wrote:

Hello Rik. Can I please request that you comment inline (snipping 
irrelevant parts) instead of top posting. It will make this thread 
easier to follow.


> There is a good description of this on
> http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html


Just a quick comment on Brad's description of a 'drop-Shadow'. The 
closes that any browser comes to actuality being able to achieve part of 
the first examples of Bard's drop-shadow is IE9 which correctly rounds 
the corners of the background with clipping on the padding edge but 
instead of the shadow being the size of the background, the shadow is 
formed and sized from the border edge.

I would still like to see some of the affects in Brad's description of a 
'drop-shadow', some of which don't behave like a box-shadow filter like 
the examples with dotted borders casting shadows on the background. Here 
is one test.

<http://css-class.com/test/temp/box-shadow-borders.htm>

I have applied Microsoft propriety filter dropShadow to examples 2 and 
4. Even though the later test case is semi transparent, the dark part 
begins on the top and left edges (not offset) and unlike the bottom and 
right edges that are offset. Example 5a is a hack using the shadow of 
example 5a.

I noticed how rgba color and this MS filter combined creates an orange 
that would not be the same as if you layered a transparent orange 
background-image or transparent colored (from a child or sibling 
element) over the same shadow. IE9 seems to create a composite of both 
colors.

Note: For some reason the box-shadow on the first few examples show 
peekaboo activity in IE9.



On 8/01/2011 12:37 PM, Rik Cabanier wrote:

> Hi Alan,
>
> No, my dropshadow is different. In your example
> (<http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm>)
> the outside of the element (aka the box) has the shadow applied.

Yes, I linked to that test to show how spread works in box-shadow.

> All
> of the testcases work with this box, not with the content inside of
> it.


Yes.


> What I'm looking for is something that would shadow the elements
> within the box. If the box contained a set of images, text and svg
> blocks, the box's image would cast a shadow on it previous siblings.


Don't you mean previous ancestors?


> The elements within the box should not interact with each other. The
> shadow would be calculated using the visible part of the element and
> be visible through non-opaque elements. I attached an example of what
> this looks like. The html for this image would look like:

(had to copy example html below, didn't like line wrapping)

<div style="filter: dropshadow;">
 <div style="..."></div> <!-- stroked rect -->
 <div style="..."></div> <!-- filled rect -->
 <p style="..">Some example text</p>
 <img src="coin.svg" style="..."></img>
 <img src="coin.svg" style="..."></img>
</div>

> Rik


Thank you Rik for a good example. I have made some examples using HTML 
and CSS. There are a few example showing steps in how this could be 
done. Please remember that I have coded in a non SVG fashion. SVG stroke 
is the same as border and SVG fill is the same as background-color if 
clipping is on the padding edge.

<http://css-class.com/test/temp/coins.htm>


The test is suited to a 16px font-size setting (IE medium) and I have 
used Arial font in the test. If your settings are different, the text 
may be out of place or broken on a new line.


* Example 1 is constructed in the manner of your code above with <!-- 
filled rect -->. This requires a bit of use of negative margins.


* Example 2 is constructed in the manner in how I would approach it 
where you can offset where the red background begins.


* Example 3 is the same as example 2 but without any text-shadow or 
box-shadow.


* Example 4 has the only CSS property that behaves like a filter, this 
is opacity. Here is an excerpt from the FX minutes [1].

    ChrisL: So when you apply a filter, what is it applied to?

    dbaron: The whole thing; the border/background/etc.
    ... I think it works like opacity and creates a new stacking context.

    <dbaron> (but not sure about that)


Indeed David is correct. Opacity creates a new stacking context. I not 
sure if some of the affects wanted (blur, glow, bevel, gradient glow, 
gradient bevel) need to really do this. In CSS, gradients are painted in 
the same painting order as background-image. So this is allowable.

background: red linear-gradient(right, #0000ff, transparent);

Here is a test that shows that opacity creates a new stacking context.

http://css-class.com/test/temp/opacity-z-index.htm


* Example 5 has a Microsoft propriety filter dropShadow applied that 
comes close to the images that Rik has created. Unfortunately this type 
of filter can not be blurred.


* Example 6 has another affect, where I have swapped positive=true for 
positive=false.


If some of the SVG affects can be used along side text-shadow and 
box-shadow, we don't necessary always want to create a new stacking 
context (well I wouldn't). For drop-shadow though, it makes sense. I 
would like the format and syntax similar to box-shadow.

drop-shadow: 20px 20px 10px (optional value for spread) <color>;


I do believe that both masking and having the drop-shadow appear through 
semi transparent backgrounds, border, etc should be allowed. Since the 
box-shadow is in the wild, an optional keyword would help (without this 
keyword, the initial value of shadow would be masked).

drop-shadow: 20px 20px 10px (spread #) <color> cast;

# I do believe that a negative value for spread should be allowed.



1. <http://www.w3.org/2010/05/17-fx-minutes.html#item04>



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

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

Received on Sunday, 9 January 2011 15:18:15 UTC