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

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%,
                             filter(url('
http://css-class.com/test/css/3/image/images/green-water2b.jpg'),
opacity(.5)) 0% -200%,
                            yellowgreen
         }
100% {
          background: filter(url('
http://css-class.com/test/css/3/image/images/green-water2b.jpg'),
opacity(.5)) 80%,
                             filter(url('
http://css-class.com/test/css/3/image/images/green-water2b.jpg'),
opacity(.5)) 0% 200%,
                            yellowgreen;
         }
}
</style>
<body>
<div id="wrapper">
</div>
</body>
</html>


>
> 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...


>
> 1: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.
> html#FilterCSSImageValue
>
>
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>

Received on Wednesday, 25 December 2013 07:18:33 UTC