Stand-in color before images load

I was invited to send the following to this list by the author, Emrah 
BASKAYA, who is having trouble posting to www-style (the administrator has 
been contacted). I think it's a good idea. I've used background colors to 
stand in for images while they're loading, but that could be a problem with 
transparent images. For example, if the image is mostly red, a red 
background would be a good stand-in, but only if  the image isn't 
transparent. If the background color disappears once the image is loaded, a 
transparent image could be used. Here's the idea in Emrah's own words:

Hi to all.

I am new in this arena, and a staunch supporter of standards. After the
short intro, let me go ahead:

Summary for the people in a hurry:
A styling property called "background-standin-color" that will be used to
define the background color until a 'potentially' multi- bit alpha image
is loaded using background-image property. Then the background-color is
switched back to "transparent".



Details:
Png is a W3 recommendation, and with Png alpha, one can do many compelling
designs. I now use it for great many things without
caring for IE5.0 . And with the introduction of custom borders in CSS3,
PNG will be webmasters best friend.

Using transparent PNG's as background e.g. for a heading is really good
IMHO, but then you cannot use the background-color
because once the PNG loads, the background-colour shows thru. Yet, if the
user-agent chooses to not load images or can't load
images due to device limitations etc, (a heading in this example)
text-color might be too hard to read. What I'd propose is a
styling command called:
background-standin-color (background-fallback-color?)

Any colour given using this command will be used by the user-agent *until*
the background image is loaded. This way we can define a good color that
will be used until the image is loaded, and when our beautiful transparent
image is loaded, the backgroud-color is switched back to transparent so it
doesn't interfere with the alpha image.

example:

div {
background-color: #fff;          /* white bg in div */
}

h2 {
color: $fff;                     /* white text in header */
background-image: url(cool.png); /* a dark yet transparent image */
background-standin-colour: #000 ; /*the bg will be black till image
                                 is loaded, so text is readible,
                                 also in no image browsers*/
}

An alternative would be a styling command like:

background-switchback: true|false; which would be used like:

background-color: #000;
background-image: url(cool.png);
background-switchback: true; /* tells the user agent to switch bg
                             color to transparent once bg image
                             is loaded. */


I wouldn't know which one is more useful. But for the sake of backwards
compatibility, the first example is better.

Also, the "standin" approach could be applied to anywhere we might have
multi level transperancy, e.g.:
border-standin-style: dotted; /* used until border image is loaded
                                  or on non-image browsers */
border-image: url("border.png") 27 27 27 27 round stretch;


-------------

Hope this was the right place to post this.

Take care all, awaiting your feedback.
Emrah BASKAYA
www.hesido.com

Received on Tuesday, 29 March 2005 01:10:15 UTC