W3C home > Mailing lists > Public > www-style@w3.org > May 2011

Re: Gradients and background-repeat (Was: Re: Automatic spec annotations)

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 12 May 2011 10:36:29 -0700
Cc: Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
Message-Id: <9C6A05B5-0277-4177-92EA-77AF9479E6C0@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Here are some examples of this sort of thing that I put together a while back. The background rotation is simulated via a transform on a separate element, and the animation seems to require WebKit:

http://bradclicks.com/cssplay/Gradient_Tiled_BG/index.html


On May 12, 2011, at 12:47 AM, Brad Kemper wrote:

> background: linear-gradient(30deg, silver 0px, silver 50%, gray 50%, gray 100%) auto;
> background-size: 100px;
> 
> Then if I want to change the scale of the stripes, I only have to change the single 'background-size' value, instead of digging around in the gradient itself (some of which can be much more complicated than this sample). I can easily animate the stripe size by animating 'background-size'. I can make the stripes flow across the background by animating 'background-position', and it would be much easier than animating the insides of the image itself. I could transition the rotation of the stripes on hover by changing a single 'background-rotation' value (not having to include the entire 'repeating-linear-gradient()' function values just to change the angle). 
> 
> Maybe I like the background property syntaxes more than you, but I think they provide a lot of power with only as much complexity as you need.
Received on Thursday, 12 May 2011 17:36:59 GMT

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