Re: [css-compositing]new Editor's draft posted

On Thu, May 23, 2013 at 4:22 AM, Henrik Andersson <henke@henke37.cjb.net>wrote:

> Rik Cabanier skriver:
> >
> > From http://www.myprovence.fr/en#p_home, notice the pulldown tab that
> > says "An event MP2013".
> > The designer had to rasterize this to an image because there's no way to
> > draw this with CSS. If he had blending, he could have drawn the text as
> > a black div with white glyphs and apply a 'darken' blend mode. This
> > blend mode would pick the darkest color, which in this case would be the
> > clouds and the sky of the backdrop.
>
> I'd call that an inverted mask. Not a blend mode.
>

How would you do an inverted mask in HTML?
This is a valid use case for blend modes.


>
> >
> > http://www.hardlycode.com/pages/barracuda-tacos
> > Notice how the text inherits the texture (probably an overlay blend
> > mode). To get this effect people have to rasterize text in photoshop and
> > place it precisely.
>
> Brown with some alpha. Hardly a blend mode.
>

Notice the fill of the text. It shows the texture through.
Sure, you could mimic this with alpha but it will not look as nice because
it dulls the color and the texture.


>
> >
> > https://developer.apple.com/wwdc/
> > This is again an image, but it could be implemented as a bunch of
> > rotated div's with rounded corners, filled with different colors
> > (gradients?) and a multiply blend.
>
> You seem correct.
>
> >
> > http://www.chipotle.com/en-US/Default.aspx?type=default
> > There are many subtle blend modes on this page.
> > I'll pick out the most obvious on. Pull on the tab and hover over the
> > flash animation. The rays of the sun are using a 'screen' animation.
> > (opacity would darken the rays)
> >
>
> That's an alpha gradient.
>

yeah, that would be a way too. That's probably why the edges of the rays
look so washed out.
The chipotle website has other examples too. for instance:
- http://www.chipotle.com/en-us/menu/ingredients/ingredients.aspx They use
canvas to render pretty glyphs and now the text is no longer accessible.
- http://store.chipotle.com/ Look at the circle. They had to rasterize it
along with the text so it's no longer accessible
- http://www.chipotle.com/en-us/fwi/environment/environment.aspx 'punching'
out text again. Text is no longer accessible



>
>
> Note that I do support the idea of blend modes in CSS.
>
> For fun and completeness, here are the ones that Flash supports:
>
> http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode
>