Re: [webkit-dev] Adding blending mode to background images
On Fri, Feb 1, 2013 at 1:08 PM, Dirk Schulze wrote: > > On Feb 2, 2013, at 8:01 AM, Benjamin Poulain wrote: > > > On Fri, Feb 1, 2013 at 12:44 PM, Rik Cabanier > wrote: > > background-image: url(a.png), url(b.png); > > -webkit-background-blend-mode: screen, screen; > > > > Out of curiosity: > > > > I am probably way too late for the party, but why not blend > surface-to-surface? E.g. > > background-image: blend(url(foo.png), url(bar.png), difference). > > > > This is in order to easily stack them: > > background-image: blend(blend(url(foo.png), url(bar.png), > difference), url(giraffe.gif), screen). > > I like the idea, but it has the big disadvantage that you can not repeat > an image, change origin and size before blending with the next layer. > True. This feels more like a filter where you pull different sources in. > > > > > Although, maybe we don't want that as it could get more difficult to > optimize... > > > > Benjamin > > ___ > > webkit-dev mailing list > > webkit-dev@lists.webkit.org > > https://lists.webkit.org/mailman/listinfo/webkit-dev > > ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Re: [webkit-dev] Adding blending mode to background images
you will be able to do this by using the fully featured 'mix-blend-mode' property [1]. for instance, if you want 2 images to blend with each other, but not with their background: <- anything that creates a stacking context 1: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#mix-blend-mode On Fri, Feb 1, 2013 at 1:01 PM, Benjamin Poulain wrote: > On Fri, Feb 1, 2013 at 12:44 PM, Rik Cabanier wrote: > >> background-image: url(a.png), url(b.png); >> -webkit-background-blend-mode: screen, screen; >> >> > Out of curiosity: > > I am probably way too late for the party, but why not blend > surface-to-surface? E.g. > background-image: blend(url(foo.png), url(bar.png), difference). > > This is in order to easily stack them: > background-image: blend(blend(url(foo.png), url(bar.png), difference), > url(giraffe.gif), screen). > > Although, maybe we don't want that as it could get more difficult to > optimize... > > Benjamin > ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Re: [webkit-dev] Adding blending mode to background images
On Feb 2, 2013, at 8:01 AM, Benjamin Poulain wrote: > On Fri, Feb 1, 2013 at 12:44 PM, Rik Cabanier wrote: > background-image: url(a.png), url(b.png); > -webkit-background-blend-mode: screen, screen; > > Out of curiosity: > > I am probably way too late for the party, but why not blend > surface-to-surface? E.g. > background-image: blend(url(foo.png), url(bar.png), difference). > > This is in order to easily stack them: > background-image: blend(blend(url(foo.png), url(bar.png), difference), > url(giraffe.gif), screen). I like the idea, but it has the big disadvantage that you can not repeat an image, change origin and size before blending with the next layer. Greetings, Dirk > > Although, maybe we don't want that as it could get more difficult to > optimize... > > Benjamin > ___ > webkit-dev mailing list > webkit-dev@lists.webkit.org > https://lists.webkit.org/mailman/listinfo/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Re: [webkit-dev] Adding blending mode to background images
On Fri, Feb 1, 2013 at 12:44 PM, Rik Cabanier wrote: > background-image: url(a.png), url(b.png); > -webkit-background-blend-mode: screen, screen; > > Out of curiosity: I am probably way too late for the party, but why not blend surface-to-surface? E.g. background-image: blend(url(foo.png), url(bar.png), difference). This is in order to easily stack them: background-image: blend(blend(url(foo.png), url(bar.png), difference), url(giraffe.gif), screen). Although, maybe we don't want that as it could get more difficult to optimize... Benjamin ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Re: [webkit-dev] Adding blending mode to background images
Sure!
For instance:
.example {
width: 500px;
height: 500px;
background-image: url(a.png), url(b.png);
-webkit-background-blend-mode: screen, screen;
}
The in this document contains 2 background images. The
'-webkit-background-blend-mode' property assigns a blending mode to each of
them.
It works very similar to '-webkit-background-composite' [1]
The images blend with each other and their existing backdrop as stated by
the CSS drawing model [2].
This feature will give designers the ability to blend layers of images
together much like they do in graphics applications [3]
Rik
1: https://www.webkit.org/blog/181/css-masks/
2: http://www.w3.org/TR/CSS21/zindex.html
3: see *http://www.youtube.com/watch?v=diJzT-sHizg* for links to tutorials.
On Fri, Feb 1, 2013 at 12:09 PM, Dirk Schulze wrote:
> Hi Rik,
>
> Can you just add an example for the better understanding please?
>
> Greetings,
> Dirk
>
> On Feb 2, 2013, at 6:43 AM, Rik Cabanier wrote:
>
> > Hi,
> >
> > I'd like to add support for blending of background images.
> > The spec for this feature can be found here:
> https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode
> >
> > The implementation will be tracked by a meta bug:
> https://bugs.webkit.org/show_bug.cgi?id=108546
> >
> > Please let me know of any concerns.
> > ___
> > webkit-dev mailing list
> > webkit-dev@lists.webkit.org
> > https://lists.webkit.org/mailman/listinfo/webkit-dev
>
>
___
webkit-dev mailing list
webkit-dev@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-dev
Re: [webkit-dev] Adding blending mode to background images
Hi Rik, Can you just add an example for the better understanding please? Greetings, Dirk On Feb 2, 2013, at 6:43 AM, Rik Cabanier wrote: > Hi, > > I'd like to add support for blending of background images. > The spec for this feature can be found here: > https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode > > The implementation will be tracked by a meta bug: > https://bugs.webkit.org/show_bug.cgi?id=108546 > > Please let me know of any concerns. > ___ > webkit-dev mailing list > webkit-dev@lists.webkit.org > https://lists.webkit.org/mailman/listinfo/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
[webkit-dev] Adding blending mode to background images
Hi, I'd like to add support for blending of background images. The spec for this feature can be found here: * https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode * The implementation will be tracked by a meta bug: * https://bugs.webkit.org/show_bug.cgi?id=108546* Please let me know of any concerns. ___ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
