Re: [css-images] element() image use cases

On Dec 25, 2013, at 1:29 PM, Alan Gresley <alan@css-class.com> wrote:

> On 25/12/2013 6:18 PM, Rik Cabanier wrote:
>> On Tue, Dec 24, 2013 at 10:10 PM, Alan Gresley <alan@css-class.com> wrote:
>> 
>>> On 14/11/2013 2:59 PM, Tab Atkins Jr. wrote:
>>> 
>>>> On Wed, Nov 13, 2013 at 7:41 PM, Rik Cabanier <cabanier@gmail.com> wrote:
>>>> 
>>>>> Example 2 could also be done with the CSS filter image function [1].
>>>>> 
>>>> 
>>>> How?
>>>> 
>>>> ~TJ
>>>> 
>>> 
>>> Rik is correct. It can be done using <image> function.
>>> 
>> 
>> oops, I looked over the history and replied to only Tab.
>> Here's an example:
>> 
>> <html>
>> <style>
>> #wrapper {
>>   width: 500px;
>>   height: 150px;
>>   animation: move1 6s infinite linear;
>> }
>> 
>> @keyframes move1 {
>> 0% {
>>           background: filter(url('
>> http://css-class.com/test/css/3/image/images/green-water2b.jpg'),
>> opacity(.5)) 0%
> 
> So was Dirk wrong with the following syntax mentioned in the 'property to control background opacity' thread [2].
> 
> background-image: -webkit-filter(foo.png, opacity(0.5));
> 
> Should it be as follows?
> 
> background-image: -webkit-filter(url(foo.png), opacity(0.5));

The syntax of both examples is excepted. The former is just more convenient. However, it should be in quotation marks:

background-image: -webkit-filter('foo.png', opacity(0.5));

> 
> And why did you not just animate background-position?
> 
> Also, does one need the -webkit- prefix and Safari on Mac to test it?
> 
>>> 
>>> http://css-class.com/test/css/3/image/background-opacity-movement1.htm
>>> 
>>> I can not test it personally since I don't have a Mac (only Safari 5.1.17
>>> on Windows).
>>> 
>>> Instead of having opacity buried within a value with parenthesis, like as
>>> follows,
>>> 
>>>   background-image: filter(foo.jpg, opacity(0.5));
>>> 
>>> it would be much more powerful to have the filter as an independent
>>> background property so the filter value can be animated.
>>> 
>>>   background-image: url(foo.jpg);
>>>   background-filter: opacity(50%);
>>> 
>> 
>> You can animate the background as long as you repeat the url and filter
>> primitive. I agree it's not as elegant though...
> 
> It far from elegant and it just makes the use cases for element() a lot longer and a lot stronger. It means that certain effects can only be done with element().
> 
> What if I needed to use something awesome like background-size, background-clip and or another background property? If I had used different images (e.g. a small SVG that needs to be 100% on at least one axis), you could not have done it with 'background-image: filter()’.

Why that? It is not different than having the url directly. Of course background-size: 100% 100% would size your SVG across the complete background painting area. The filter() function just does the filter operation after sizing.

I think you’re misinterpreting what Rik said earlier. Animation between the following settings is defined:

	background-image: url(‘image.png') —> background-image: filter(‘image.png', grayscale(50%))

However:

	background-image: filter(‘image.png’, grayscale(0%)) —> background-image: filter(‘otherImage.png', grayscale(50%))

(Note that the referenced images are different.)

This has no affect on the other background properties that still can be animated (background-size, background-origin, …)

Greetings,
Dirk


> 
> I suspect that authors testing element() may have accoutered the opacity bug when used with element() and possibly abandoned a technique or approach because of it. The success or merits of a CSS property and value should be reviewed if there is such a bug. I have now used the 'CSS dithering' hack several times now to get around this bug.
> 
> https://bugzilla.mozilla.org/show_bug.cgi?id=939095
> 
> 
>>> 1: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.
>>> html#FilterCSSImageValue
> 2. http://lists.w3.org/Archives/Public/www-style/2013Dec/0428.html
> 
> 
> Alan
> 
> 
> 
> -- 
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/

Received on Wednesday, 25 December 2013 17:49:16 UTC