- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Thu, 12 May 2011 10:36:29 -0700
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
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 UTC