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

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

From: Rik Cabanier <cabanier@gmail.com>
Date: Tue, 10 Apr 2012 20:32:31 -0700
Message-ID: <CAGN7qDBg9MJJ5JC9CPcT=xPeBgXq+cA3nkQwxOb9qWSd_F1ZZA@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: www-style list <www-style@w3.org>
Hi Lea,

yes, I've been thinking about that too.
Blending is in the same league as alpha in that you want to be able to
specify it for every layer.
I've added a section on blending in the background after user feedback and
was seeing if there was support for adding it to shadows.

Extending the 'color' keyword so you can specify the blending mode for the
text content seems reasonable. I like the fact that it degrades well for
browsers that don't implement blending.

Thanks for pointing to the tweets!
Rik

On Tue, Apr 10, 2012 at 8:05 PM, Lea Verou <leaverou@gmail.com> wrote:

>  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> 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:33:02 GMT

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