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

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));

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()'.

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 12:29:40 UTC