Re: in-between values

On Fri, Jan 21, 2011 at 9:54 AM, Brad Kemper <> wrote:
> I had an idea for a special value that could be used with a variety of properties, for transitioning, animating, or just picking single values that are in between two values that don't normally have any mid-points. So for instance:
> background-clip: mid(border-box, padding-box, 0.24) /* would clip 1/4 of the way from border-box to padding-box */
> background-clip: mid(padding-box, border-box, 0.24) /* would clip 1/4 of the way from padding-box to border-box */
> color: mid(transparent, blue, 0.7) /* equivalent to color:blue; opacity:0.7 */
> color: mid(blue, transparent, 0.7) /* equivalent to color:blue; opacity:0.3 */
> border-style: mid(dashed,solid,0.5) /* spaces between dashes are half their normal length */
> border-style: mid(dashed,none,0.5) /* spaces between dashes are twice their normal length, and used border-width is half of specified value */
> overflow: mid(visible, hidden, 0.5) /* overflow is visible, but semi-opaque */
> This wouldn't work for everything, and we'd have to define what property values it did work for. New modules could define how it worked for their own values.

I think something like this is definitely a good idea.  I had
considered introducing it in Image Values, but decided instead to just
make an explicit cross-fade() function.  mid() is a much better name
than what I was thinking of using - interpolate().

The Transitions spec can define mid() in general, and then, as you
say, individual modules can define if it applies to new properties and
values they define, and how.

I would recommend that the third value should be either a <number>
between 0 and 1 or a <percentage> between 0% and 100%.

I also think an optional fourth argument detailing the transition
strategy should be allowed.  Most properties/values only have one
transition strategy named 'auto', but some can be transitioned in
different ways, like <color> transitioning in rgb or hsl.


Received on Friday, 21 January 2011 18:27:13 UTC