W3C home > Mailing lists > Public > www-style@w3.org > November 2009

[CSSWG] Minutes and Resolutions TPAC F2F 2009-11-03: drop shadows and filter effects

From: fantasai <fantasai.lists@inkedblade.net>
Date: Tue, 17 Nov 2009 15:47:58 -0800
Message-ID: <4B03362E.2030407@inkedblade.net>
To: www-style@w3.org
Drop Shadows and Filter Effects

   - Discussed drop shadows and what an inner shadow is
       Tab: the shadow is cast by a negative of the alpha channel, then clipped
            to the actual alpha channel

   - Discussed applying effects like drop shadows and opacity to different parts.
       fantasai: The pieces we'd need to address, in various combinations:
                 background layers, border (one piece), content (one piece)
     Only adjacent layers would need to be composited together. Drop shadows
     would then paint immediately below the composited layer.

   - It seems likely the SVG filters spec and the 'filter' property
     would be able to address these use cases particularly if parametrized
     canned filters were added for commonly desired effects and CSS targets
     were added e.g. as described by roc in

   - This topic will be further discussed with the SVGWG possibly on

====== Full minutes below ======

Gradients and Image Sprites

   Arron: recall this had to but not sure what it is
   dbaron: Who added it
   Tab: Not sure what it means either
   (we are all confused)
   Tab: Asked Shepazu to help with SVG equivalents of the gradient examples
   ... for sprites, its choosing between options
   fantasai: I just linked to the various proposals
   dbaron: We implemented -moz-image-rect
   fantasai: the URI based syntax has no fallback. Could add fallback behavior
             by putting in the image() notation and requiring that impls that
             support image() notation support the url notation
   fantasai: no need for a separate functional notation.
   fantasai: waiting for media fragments wg to publish a spec
   fantasai: Image sprites would make it more efficient that specifying
             explicit coords everywhere in the stylesheet
   fantasai: not so much to discuss right now therefore
   Simon: I have some feedback, will send on list
   ACTION: Simon to send gradients feedback to www-style

Drop shadows and Filter Effects

   <bradk> http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html
   (Brad demonstrates)
   Brad: we want something that casts a shadow under the element, casts
         from background and border
   Brad: transparency affects the color of the shadow where it overlaps. based
         on alpha channel
   (Brad fiddles with the drop shadow dialog in photoshop)
   Brad: shadow has translucency
   ... inner version of a shadow
   Chris: Please define how you are using the term inner
   Brad: the shape is cut out of the background  and the shadow is on that
   Chris: the shadow is in fact still on top
   Brad: yes
   (we discover the projector really needs color management)
   Brad: so this is easy with sharp edges. with soft edges people seemed
         to be confused
   Chris: its the same copy, remove color, add color, blur, opacity operation
   Chris: notice you are using blending modes - svg has those
   (discussion on what exactly is happening in photoshop as people get their
    heads around it)
   Simon: Easier to look at the actual proposal
   Tab: the shadow is cast by a negative of the alpha channel, then clipped
        to the actual alphs channel
   John: what is the use case for this?
   ... the photoshop is not convincing me of the utility
   fantasai: We have box shadows already
   dbaron: And we implement that, but lets decide if this part is useful
           before deciding exactly how it works
   (brad demonstrates inner shadow on text)
   Simon: With box and text shadow, the shadow does not depend on the
          transparency of the element
   Simon: fully transparent text still casts a shadow, with text-shadow
   Brad: suppose you want just the border, or the background, or *one*
         of the backgrounds shaddowed
   Simon: That seems more useful in the filters discussion
   <bradk> apply-to(border + foreground, background-image + background-color)
   <bradk> apply-to(border + foreground, background-image + background-color)
   <bradk> apply-to(border + foreground, background-image + background-color)
   Brad: pluses mean the shapes composite before shadow calculation,
         commas mean they each have their own shadow
   dbaron: apply-to gives the z-order?
   dbaron: what if you apply to things that are not z-ordered together?
   fantasai: you can't composite the text and the background and paint
             onto the border
   Simon: this is trying to get photoshop into css, i don't see the use
          case. Separate elements can be used to do this
   John: This sort of effect is better done in SVG, we don't need another
         language to do this. its a complex mechanism that duplicates
         something which already exists
   fantasai: So SVG filters can be used but we lack the ability to select
             parts of the element
   John: If the goal is to do something this complex, is CSS the right
   Chris: We are headed for a fairly complex selector model if we do
          this, to get at parts of the border
   fantasai: getting the whole border would be sufficient, but we need to
             address the different background layers
   <bradk> ::apply-to(border + foreground, background-image + background-color)
   Chris: could imageine pseudo elements to address the border, the
          background(s)  and the content
   <fantasai> Then how do you turn it off?
   <fantasai> How many pseudo-elements do you need to write to turn it off?
   dbaron: I don't think this is the right way to do it...
   Brad: just targetting the whole border would satisfy my needs
   fantasai: The pieces we'd need to address, in various combinations:
             background layers, border (one piece), content (one piece)
   Brad: we don't want to implement all of svg in css, sure. We want to
         be able to use parts of them
   dbaron: we already do SVG filters on any element
   Brad: but only the whole element at once
   dbaron: add to source-graphic source-alpha etc to add source-border,
           source-background ......
   dbaron attempts to summarize how svg filters work
   <smfr> http://www.w3.org/TR/SVG/filters.html#FilterPrimitivesOverview
   <smfr> (scroll down)
   Simon: fill-apint and stroke-paint
   dbaron: things to address the border, background or contents
   Tab: Could we use parameters with that
   Chris: Sure
   <fantasai> http://lists.w3.org/Archives/Public/www-style/2009Oct/0072.html
   fantasai: need a way to parameterise that so we have a library of effects
             and apply them,  without writing new filters
   Simon: background image in SVG is what has already been painted by
          other elements
   fantasai: roc has some name suggestions
   Chris: please pass those on to the SVG WG. The editor is Erik Dahlstrom
          from Opera. We can add them
   David: Put them in the order you want and thats how they end up
   <shepazu> [I'd be happy to talk to the CSS about my SVG parameters
             specification, which could pass parameters through a CSS property]
   <jdaggett> shepazu: cmon down dear
   fantasai: does not make sense for a border to cast a shadow *under*
             the background
   <fantasai> border casts a shadow immediately under the border, i.e.
              over the background
   Brad: we should retain the natural stacking order
   <fantasai> if border and background are composited, then their shadow
              casts underneath the composited layer
   <fantasai> i.e. directly underneath the background
   (discussion on how to pass opacity to a filter)
   Simon: how to get the output of the filter in the right place
   Shepazu: we are adding more canned filter effects, we could add more
            if you identify the cases. Adds a merge for the border etc
   fantasai: a filter to make the border and background partly transparent
   Shepazu: filters can be computationally intensive. Though canned
            filters can be optimised. need to warn authors
   Tab: Yes
   ... but won't trigger unexpectedly. Its clearly an opt-in
   Shepazu: Need to make a tradeoff between power, speed and authoring ease
   Simon: want to see blur and colour manip filters
   Shepazu: sepia, b&w
   Brad: so value in having a simple drop shadow?
   Shepazu: need review from Erik and Anthony
   Brad: syntax there is more similar to the existing box-shadow property.
         Illustrations were done in photoshop
   Shepazu: Need to discuss, only now introducing canned filter effects
            so open to syntax that makes sense for CSS authors
   (we look at inner shadow on text again)
   Simon: for canned filters we would likely go to core graphics
   fantasai: happy to join any SVG telcons about this
   <ChrisL> filters spec is here  http://dev.w3.org/SVG/modules/filters/publish/SVGFilter.html
   <dbaron> http://lists.w3.org/Archives/Public/public-fx/
   Shepazu: there is a public-fx@w3.org list for SVG+CSS cross-WG discussions
   Chris: canned effects are great, though people should be able to use
          arbitrary filters as well

F2f dates, the re-re-run

   SteveZ: the proposed dates clash with the AB meeting. next week would be fine
   Now moved to Cupertino, 29-31 March 2010

SVG Params

   (Doug walks through http://dev.w3.org/SVG/modules/param/master/SVGParamPrimer.html )
   David, PLH: using ? in the URI mesans its server side, not client side
   foo.svg#param(name, value; name,value)
   <dbaron> might you want to svg:use foo.svg#element with parameters?
   john: is there an expression language?
   shepazu: not yet
   <Bert_lap> (Use an SVG file that consists of "param(x)" and nothing more,
               than pass <param name=x value="A bit of SVG..."> :-) )
   Peter: would be great to pass in the currently cascaded color for example
   * dbaron wonders if we're taking a break now?

<ChrisL> rrsagent, make minutes
<RRSAgent> I have made the request to generate http://www.w3.org/2009/11/03-CSS-minutes.html ChrisL


<dbaron> ok, I updated the issues list and http://wiki.csswg.org/spec/css3-color
          should now be current
<dbaron> I think it has almost exactly the same number of issues as the
          last draft
<dbaron> although a decent number of them are repeats

<fantasai> Bert: http://dev.w3.org/csswg/selectors3/issues-lc-2009
<fantasai> Bert: http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20091025/reports/
Received on Tuesday, 17 November 2009 23:48:41 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:40 UTC