W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css4-images] First draft of css4-images, feedback requested

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 8 Aug 2012 09:23:27 -0700
Message-ID: <CAAWBYDB+Eh=nNHh74L_k5bnwvUetr19TNnE-qDgVom8TWaP8CA@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Brian Manthos <brianman@microsoft.com>, "Aharon (Vladimir) Lanin" <aharon@google.com>, www-style list <www-style@w3.org>, Kang-Hao Lu <kennyluck@csail.mit.edu>
On Wed, Aug 8, 2012 at 8:52 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Aug 8, 2012, at 7:33 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> On Tue, Aug 7, 2012 at 11:44 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>>> On Aug 7, 2012, at 12:42 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>>> Definitely agree, though if I explored this in more detail, I'd do it
>>>> with an @image at-rule that was basically creating a simplified form
>>>> of SVG filters/etc in CSS.
>>>
>>> That sounds like it'd be harder to animate.
>>
>> Not necessarily.  You'd "just" define the way in which animating an
>> <image-graph> or whatever works, which would involve animating the
>> sub-properties.  I highly doubt you'd ever want to animate just some
>> of the parts of it, after all.
>
> Can you elaborate with what that would look like?

Sure.  This is just a sketch, mind you - don't assume that any syntax
shown here is anything like what I might eventually want to go with.

@image foo {
  src: "foo.jpg";
  transform: rotate(30deg);
  size: 50px 100px;
  repeat: repeat;
}

@image bar {
  src: "bar.jpg";
  size: 200px 200px;
  repeat: repeat;
}

foo { background-image: image(foo); transition: background-image .5s linear; }
foo:hover { background-image: image(bar); }

Halfway through the transition, the background-image is something that
looks the same as:

@image halfway-between-foo-and-bar {
  src: cross-fade("foo.jpg", "bar.jpg", 50%);
  transform: rotate(15deg);
  size: 125px 150px;
  repeat: repeat;
}

~TJ
Received on Wednesday, 8 August 2012 16:24:14 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT