Video with and without CSS filters

The video on the left does not have CSS filters applied, while the video on the right does.

These videos are playing from the same source file.

Re: [css4-background] use cases for 'border-corner-shape'? This message: [ Message body ] [ Respond ] [ More options ] Related messages: [ Next message ] [ Previous message ] [ Maybe in reply to ] From: 一丝 Date: Thu, 6 Jun 2013 11:06:44 +0800 Message-ID: To: Lea Verou , "www-style@w3.org" , fantasai , Kang-Hao Lu About Border Triangle: Through the border-corner-shape can indeed achieve a triangle: border-corner-shape: bevel; border-radius: 50% / 50% 0 0 50%; width: 180px; height: 60px; But that's not what I want, I want to pass a new property to achieve this effect (looks like the corners and the interior is a whole, rather than go through the hack splicing methods.): http://img01.taobaocdn.com/tps/i1/T1jHq3XrpdXXck28I0-660-752.png I do not know @fantasai there is no good idea? 以上 一丝 2013/6/6 一丝 > Dear Lea Verou: > I have friends and W3C China confirmed over the year, Test the Web Forward > China has two stations, respectively, in Shanghai and Shenzhen. How about? > To China play it? I miss you! > > > 以上 > 一丝 > > > 2013/6/5 Lea Verou > >> Hi 一丝, >> >> I've thought about that too, but I'm afraid I can't think of any >> sufficiently generic way of solving this problem. >> However, border-corner-shape will make it much easier, you won't need to >> bother with all the border hacks, as we'll be able to do triangles natively. >> >> Cheers, >> Lea >> >> Lea Verou >> W3C developer relations >> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >> >> >> >> >> >> >> On Jun 5, 2013, at 01:15, 一丝 wrote: >> >> Dear Lea Verou: >> >> Thank you very much for such a quick reply to me. >> >> About drop-shadow () filter I have no problem. This is precisely the lack >> of resolve box-shadow, right? >> >> I actually crucial question has nothing to do with shadows: >> CSS4-background in since you can add "border-corner-shape" attribute to >> achieve a more extensive border, so my idea is whether you can add an >> attribute with an element does not use pseudo-elements to achieve the above >> example does this little triangle ? >> >> Similar: border-left-shape: triangle (left border is a triangle, and then >> through other attributes control this location) >> >> PS: I am currently taobao.com front-end engineers, very much like CSS. >> Last year I participated in the "Test the Web Forward" ( >> http://testthewebforward.org/beijing-2012.html), I hope you can come to >> China this year to do the exchange and sharing. In China, many people want >> to participate in specification, but there is no good guidance and >> atmosphere. >> >> >> 以上 >> 一丝 >> >> >> 2013/6/5 Lea Verou >> >>> Hi 丝, >>> >>> This is exactly what the drop-shadow() filter is for. What do you have >>> against it? If it's the browser support, keep in mind anything we add to >>> the spec now, will likely have worse browser support as it will be newer. >>> >>> Thanks for the praise about my border-radius talk :) >>> >>> Cheers, >>> Lea >>> >>> Lea Verou >>> W3C developer relations >>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >>> >>> >>> >>> >>> >>> >>> On Jun 5, 2013, at 00:01, 一丝 wrote: >>> >>> @Lea Verou >>> >>> In fact, I am more concerned about how to use the border or other >>> attributes to achieve this effect: http://dabblet.com/gist/3820382 >>> 1. can have a better box-shadow effect (do not use the filter: >>> drop-shadow) >>> 2. do not use the pseudo-elements >>> >>> PS: You on the border-radius of the ppt is really cute. With Chinese >>> speaking call: 萌, Japanese called:かわいい. >>> >>> >>> 以上 >>> 一丝 >>> >>> >>> 2013/6/5 Lea Verou >>> >>>> I came across a gorgeous use case today for both the bevel (in multiple >>>> places) and the scoop values: http://www.losttype.com/klinic/?s=eee >>>> >>>> Lea Verou >>>> W3C developer relations >>>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >>>> >>>> >>>> >>>> >>>> >>>> >>>> On Mar 26, 2013, at 14:18, fantasai >>>> wrote: >>>> >>>> > On 03/24/2013 03:50 PM, Lea Verou wrote: >>>> >> I’ll try to find some additional good examples. >>>> >> >>>> >> Elika, since you added the property, maybe you had some good >>>> existing use cases in mind? >>>> > >>>> > The major one for 'bevel' was to allow the shapes that are used in >>>> certain >>>> > kinds of breadcrumb trails and tabs: some styles uses slanted tabs >>>> rather >>>> > than curved-corner ones, and I've seen breadcrumb trails that look >>>> like >>>> > ____________________ >>>> > | \ \ \ >>>> > |______\_______\_______\ >>>> > >>>> > or >>>> > ____________________ >>>> > | ... \ ... \ ... \ >>>> > |_____/______/_______/ >>>> > >>>> > (Earlier designs of the Launchpad bug tracker did this, for example.) >>>> > >>>> > Another use case was to give shapes that would commonly allow the >>>> hit-testing >>>> > (and background-painting) area to more closely approximate >>>> fancy-cornered >>>> > border images. >>>> > >>>> > ~fantasai >>>> > >>>> >>>> >>>> >>> >>> >> >> > Re: [css4-background] use cases for 'border-corner-shape'? This message: [ Message body ] [ Respond ] [ More options ] Related messages: [ Next message ] [ Previous message ] [ Maybe in reply to ] From: 一丝 Date: Thu, 6 Jun 2013 11:06:44 +0800 Message-ID: To: Lea Verou , "www-style@w3.org" , fantasai , Kang-Hao Lu About Border Triangle: Through the border-corner-shape can indeed achieve a triangle: border-corner-shape: bevel; border-radius: 50% / 50% 0 0 50%; width: 180px; height: 60px; But that's not what I want, I want to pass a new property to achieve this effect (looks like the corners and the interior is a whole, rather than go through the hack splicing methods.): http://img01.taobaocdn.com/tps/i1/T1jHq3XrpdXXck28I0-660-752.png I do not know @fantasai there is no good idea? 以上 一丝 2013/6/6 一丝 > Dear Lea Verou: > I have friends and W3C China confirmed over the year, Test the Web Forward > China has two stations, respectively, in Shanghai and Shenzhen. How about? > To China play it? I miss you! > > > 以上 > 一丝 > > > 2013/6/5 Lea Verou > >> Hi 一丝, >> >> I've thought about that too, but I'm afraid I can't think of any >> sufficiently generic way of solving this problem. >> However, border-corner-shape will make it much easier, you won't need to >> bother with all the border hacks, as we'll be able to do triangles natively. >> >> Cheers, >> Lea >> >> Lea Verou >> W3C developer relations >> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >> >> >> >> >> >> >> On Jun 5, 2013, at 01:15, 一丝 wrote: >> >> Dear Lea Verou: >> >> Thank you very much for such a quick reply to me. >> >> About drop-shadow () filter I have no problem. This is precisely the lack >> of resolve box-shadow, right? >> >> I actually crucial question has nothing to do with shadows: >> CSS4-background in since you can add "border-corner-shape" attribute to >> achieve a more extensive border, so my idea is whether you can add an >> attribute with an element does not use pseudo-elements to achieve the above >> example does this little triangle ? >> >> Similar: border-left-shape: triangle (left border is a triangle, and then >> through other attributes control this location) >> >> PS: I am currently taobao.com front-end engineers, very much like CSS. >> Last year I participated in the "Test the Web Forward" ( >> http://testthewebforward.org/beijing-2012.html), I hope you can come to >> China this year to do the exchange and sharing. In China, many people want >> to participate in specification, but there is no good guidance and >> atmosphere. >> >> >> 以上 >> 一丝 >> >> >> 2013/6/5 Lea Verou >> >>> Hi 丝, >>> >>> This is exactly what the drop-shadow() filter is for. What do you have >>> against it? If it's the browser support, keep in mind anything we add to >>> the spec now, will likely have worse browser support as it will be newer. >>> >>> Thanks for the praise about my border-radius talk :) >>> >>> Cheers, >>> Lea >>> >>> Lea Verou >>> W3C developer relations >>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >>> >>> >>> >>> >>> >>> >>> On Jun 5, 2013, at 00:01, 一丝 wrote: >>> >>> @Lea Verou >>> >>> In fact, I am more concerned about how to use the border or other >>> attributes to achieve this effect: http://dabblet.com/gist/3820382 >>> 1. can have a better box-shadow effect (do not use the filter: >>> drop-shadow) >>> 2. do not use the pseudo-elements >>> >>> PS: You on the border-radius of the ppt is really cute. With Chinese >>> speaking call: 萌, Japanese called:かわいい. >>> >>> >>> 以上 >>> 一丝 >>> >>> >>> 2013/6/5 Lea Verou >>> >>>> I came across a gorgeous use case today for both the bevel (in multiple >>>> places) and the scoop values: http://www.losttype.com/klinic/?s=eee >>>> >>>> Lea Verou >>>> W3C developer relations >>>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou >>>> >>>> >>>> >>>> >>>> >>>> >>>> On Mar 26, 2013, at 14:18, fantasai >>>> wrote: >>>> >>>> > On 03/24/2013 03:50 PM, Lea Verou wrote: >>>> >> I’ll try to find some additional good examples. >>>> >> >>>> >> Elika, since you added the property, maybe you had some good >>>> existing use cases in mind? >>>> > >>>> > The major one for 'bevel' was to allow the shapes that are used in >>>> certain >>>> > kinds of breadcrumb trails and tabs: some styles uses slanted tabs >>>> rather >>>> > than curved-corner ones, and I've seen breadcrumb trails that look >>>> like >>>> > ____________________ >>>> > | \ \ \ >>>> > |______\_______\_______\ >>>> > >>>> > or >>>> > ____________________ >>>> > | ... \ ... \ ... \ >>>> > |_____/______/_______/ >>>> > >>>> > (Earlier designs of the Launchpad bug tracker did this, for example.) >>>> > >>>> > Another use case was to give shapes that would commonly allow the >>>> hit-testing >>>> > (and background-painting) area to more closely approximate >>>> fancy-cornered >>>> > border images. >>>> > >>>> > ~fantasai >>>> > >>>> >>>> >>>> >>> >>> >> >> >