Re: Proposal: background-image-opacity or background-opacity

On Tue, Jun 2, 2009 at 12:12 PM, Mark <markg85@gmail.com> wrote:
> On Tue, Jun 2, 2009 at 6:59 PM, Giovanni Campagna
> <scampa.giovanni@gmail.com> wrote:
>> 2009/6/2 Tab Atkins Jr. <jackalmage@gmail.com>:
>>> On Tue, Jun 2, 2009 at 11:38 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>>>>
>>>> On Jun 2, 2009, at 9:21 AM, Boris Zbarsky wrote:
>>>>
>>>>> Mark wrote:
>>>>>>
>>>>>> Now with the css 3 backgrounds module multiple backgrounds are going
>>>>>> to be supported. Webkit has support for it and Gecko is in the
>>>>>> progress of making it all work. Now with that module (once adapted by
>>>>>> the biggest rendering engines) you can give one element both his
>>>>>> normal image and his hover image which is exactly the way it should be
>>>>>> if you ask me. Now i see one issue comming there. If you want to fade
>>>>>> from the normal image to the hover image you currently (if i read the
>>>>>> spec right) can't do that because there is no way of letting either
>>>>>> one of those images disappear, no way to set the opacity per image.
>>>>>
>>>>> Seems like this could be dealt with by just having separate style rules
>>>>> setting the two images and defining CSS transitions on background image to
>>>>> do fade in/out, maybe....
>>
>> How would you do that? Do you mean to fade out completely the previous
>> image, then fade in the new?
>> I don't think this is what the original poster intended.
>>
> I don't exactly know what the css transitions draft (?) is capable of
> but it doen't sound like the thing i meant.
> Fading out one image right now is possible! only then you need to fade
> out the entire div which required you to make 1 container div and a x
> number of state divs (one for hover one for normal etcetera.) What i
> intended was just the ability to set the opacity of one of the
> background images (or all).. and the added bunos of that ability is
> that a fade transition becomes possible without putting in multiple
> elements to cross fade.

The CSS Transitions draft is a module presenting the ability to
smoothly transition between different values rather than just abruptly
changing them.  For example, the following CSS will produce an abrupt
transition:

    p {
      border: 2px solid red;
    }
    p:hover {
      border-color: blue;
    }

However, we can add a rule like this:

    p {
      transition-property: border-color;
      transition-duration: 1s;
    }

And now, whenever you hover over the <p>, the border will smoothly
change from red to blue over a second, and smoothly change back from
blue to red when you move your mouse away.

In your case, you have an abrupt transition like:

    div {
      background: url( foo.jpg );
    }
    div:hover {
      background: url( bar.jpg );
    }

And you want to make it into a smooth transition by crossfading from
one image to the other.  This is exactly what the Transitions module
is designed for, and crossfading between images does seem to be the
best idea in general for this sort of thing.  So we just need to
extend the Transitions module so that it specifies how to transition
the background-image property.

Not only does this make it extremely easy for you, it also maintains
backwards compatibility with old browsers.  They'll just ignore the
transition declarations and make an abrupt transition, which isn't
quite as pretty but still gets you basically what you want.  Your
original suggestion doesn't do this - browsers without the suggested
ability will just display both backgrounds at the same time all the
time.  But don't worry about it; like I said in an earlier email,
usually the first thing to pop to mind is just standardizing what
you're currently doing, even if what you're currently doing is a dirty
hack.  ^_^

~TJ

Received on Tuesday, 2 June 2009 17:27:04 UTC