W3C home > Mailing lists > Public > www-style@w3.org > April 2012

Re: [css3-background] blending on 'box-shadow' and 'text-shadow'

From: Lea Verou <leaverou@gmail.com>
Date: Tue, 10 Apr 2012 20:05:28 -0700
Message-ID: <4F84F4F8.2080808@gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
CC: www-style list <www-style@w3.org>
Hi Rik,

I'm aware of that draft, I even shared it on twitter a few days ago [1]. 
However, these operate on the entire element. As you have noticed, 
sometimes you need more  granular control, i.e. only apply blending 
modes to parts of an element. Shadows, borders etc. This was also 
pointed to me after that tweet, see [2][3][4]. The proposed syntax in 
those tweets is quite bad, but it demonstrates the need for something.

Hopefully that clears up the confusion.

[1]: https://twitter.com/#!/LeaVerou/status/188190173241155584
[2]: https://twitter.com/#!/MattWilcox/status/188193074395086848
[3]: https://twitter.com/#!/MattWilcox/status/188193572539994112
[4]: https://twitter.com/#!/MattWilcox/status/188194401930059776

Lea Verou (http://lea.verou.me | @LeaVerou)

On 10/4/12 18:04, Rik Cabanier wrote:
> On Tue, Apr 10, 2012 at 5:51 PM, Lea Verou <leaverou@gmail.com 
> <mailto:leaverou@gmail.com>> wrote:
>     I think this problem should be solved more generically, rather
>     than adding keywords to random properties. For example, the
>     `difference` blending mode could be used on text color to make it
>     more legible regardless of background. Or, blending modes on
>     borders and/or backgrounds could produce quite interesting effects.
> That's what I'm trying to do. See an early draft here: 
> https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
> Shadows are unique in that people generally want to blend the shadow 
> but not the element itself. I'm not sure how you cold change the 
> shadow apart from adding a keyword to the box-/text-shadow attribute.
>     They could also replace the `invert` keyword on `outline`.
>     Maybe a function that can be used in place of any <color> value?
> I'm not sure if I understand. Can you elaborate?
>     Lea Verou (http://lea.verou.me  | @LeaVerou)
>     On 10/4/12 15:52, Rik Cabanier wrote:
>>     All,
>>     I'm currently working on the blending specification
>>     (http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/)
>>     and someone brought up that a very common use case for blending
>>     is drop shadows.
>>     Some of our applications such as Photoshop, Illustrator and
>>     InDesign set the shadow to multiply by default since it provides
>>     a more pleasing appearance that can't be done with simple alpha
>>     blending. See
>>     http://css-tricks.com/dont-use-black-for-shadows/ for a
>>     discussion on why this is.
>>     Would there be interest in an additional keyword to specify
>>     blending to 'box-shadow' or 'text-shadow'?
>>     the syntax could look like:
>>         box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) multiply
>>     Rik
Received on Wednesday, 11 April 2012 03:06:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:14 UTC