Proposal: background-image-opacity or background-opacity

Hey,

I just registered to this mailing list to propose this idea.
But i have some other ideas as well which i will propose sometime soon.

First let me explain how i made this idea up.
Right now i'm tyring to make image hovers that fade in with
javascript. The way to do that now is by making 3 divs.
Not the fading in is the reason multiple elements are needed. Actually
a container + the possible states (normal and hover).

1 for the container
1 for the normal image
1 for the hovered image

That's 2 divs overkill but currently the only way to get it done.

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.
You can, with javascript, remove one image instantly but not fade it
away because there is no opacity property for parts of an element like
an image. That's where this background-image-opacity (or
background-opacity.. both names will do fine for me) comes in handy.
That property should support multiple transparency's for every image
in the div (you get the point). so there you can let an image "fade"
away.

Now for a small css code example of what i mean:
background-image: url(hover.png), url(normal.png);
background-opacity: 0.0, 1.0;

In this case the normal image is vissible. When hovering this should
happen (in 10 steps so you have an animation) or should be possible to
do when using javascript.
background-opacity: 0.1, 1.0;
background-opacity: 0.2, 1.0;
background-opacity: 0.3, 1.0;
background-opacity: 0.4, 1.0;
background-opacity: 0.5, 1.0;
background-opacity: 0.6, 1.0;
background-opacity: 0.7, 1.0;
background-opacity: 0.8, 1.0;
background-opacity: 0.9, 1.0;
background-opacity: 1.0, 1.0;

Here the hover image faded in with the normal image still behind it.
You can choose to "do" something different but this is just a case to
demonstrate where proposed background-opacity property is verry much
wanted. This makes html more clean because constructions like this:
<div>
  <img />
  <img />
</div>

are not needed anymore and can be done with just:

<div></div>

or

<img />

It all depends on the css behind it.
Lucky for me the "CSS Backgrounds and Borders Module Level 3" is still
in draft state so i hope i'm on time to get this property in if it
gets accepted.

Btw. How do i proceed from here now that the proposal is here? is this just it?

I hope i can get some feedback on this idea.

Greethings,
Mark

Received on Tuesday, 2 June 2009 05:59:45 UTC