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

On Wed, Aug 8, 2012 at 8:52 AM, Brad Kemper <> wrote:
> On Aug 8, 2012, at 7:33 AM, "Tab Atkins Jr." <> wrote:
>> On Tue, Aug 7, 2012 at 11:44 PM, Brad Kemper <> wrote:
>>> On Aug 7, 2012, at 12:42 PM, "Tab Atkins Jr." <> 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;


Received on Wednesday, 8 August 2012 16:24:14 UTC