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

On Aug 8, 2012, at 9:23 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

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

Understood. 

> @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;
> }

Hmm. So far, it seems like unnecessary complication. You have 'src', 'size', and 'repeat' duplicating what are already available as background properties. I think having 'background-rotate' would be a whole lot simpler and easier for authors, and satisfy most of the use cases. The @rule would primarily be for so we can include list item images, border images, cursors, and 'content' images? Doesn't really seem worth it to me, whereas 'background-rotate' would be more widely useful while keeping it simple. The @rule seems like a more complicated replacement of background in order to get marginally broader in what you can apply it to.

Received on Wednesday, 8 August 2012 20:09:56 UTC