[thelist] css "transparency"

[Shirley Kaiser, SKDesigns]

Hi,

Passing through and this topic caught my eye. I've fiddled with this
effect, too, and have had many people ask me about this effect at my weblog
at <http://www.brainstormsandraves.com/>. The background leaves are
no-repeat, and the checkerboard .gif image is the background image for the
content table, which gives the effect of movement over the leaves background.

You can do a lot with this concept varying the checkerboard pattern and the
colors of that checkerboard image and the background image, but as Paul
mentions, you must be careful about how fonts read over the top of them,
too. The letters can get really jagged to the point of being unreadable or
just not looking very good. In addition to what Paul already stated, I've
also found the more contrast between the background colors and the font
color the better.

I prefer the term "translucency" for this. Either way, though, it can be a
fun adventure of exploring.

Paul, yours is nice. I like it. :-)

Warmly,
Shirley
--
Shirley E. Kaiser, M.A.,  SKDesigns  mailto:skaiser1 at skdesigns.com
Website Design, Development      http://www.skdesigns.com/
WebsiteTips: Design Resources  http://www.websitetips.com/
Brainstorms and Raves  http://www.brainstormsandraves.com/
WaSP Steering Committee       http://www.webstandards.org/

At 05:17 PM 9/24/2002, you typed:
>Paul,
>
>Not quite.
>
>There is a background-image in the 'body:' definition that is fixed in
>place.
>
>The 'div' that "floats" has its own background-image that is a "transparent"
>image. I've used images where every other pixel is transparent, which
>creates the sort of "milky" effect seen on your example page.
>
>Because the image on the body background is "fixed" it stays in place in the
>browser window even when other elements scroll. You can, of course, set that
>image to scroll as well.
>
>Here's a link to an example that's part of a site I'm currently developing
>for a restaurant (the site has not actually been publicly published, but
>please take a look anyway ;->):
>
>http://home.earthlink.net/~nellsrestaurant/recipes.html
>
>A caveat: Be careful with font sizes for text that you put on top of a
>transparent image like these: at smaller sizes, the "holes" in the
>background-image can make your text look pretty ragged. Serif fonts seem to
>be problematic, too...Where are those pixel-splitting monitors when we need
>them?
>
>Richard
>  --
>Richard McFarland <rlmcfarland at attbi.com>
>206-378-6942
>
> > From: Paul Bennett <paul at teltest.com>
> > Reply-To: thelist at lists.evolt.org
> > Date: Wed, 25 Sep 2002 09:59:59 +1200
> > To: thelist at lists.evolt.org
> > Subject: Re: [thelist] css "transparency"
> >
> > Thanks for all the help and links - so just to see if I have this straight:
> > The content div actually has no "translucency" (giving the thesaurus a
> > hammering today...) but has a seperate bg image to the body. This is
> > fixed in positon to sit over the body image but provide a new image
> > effect (distortion / translucency etc). As it is set not to scroll, it
> > stays static as the content div scrolls and gives the illusion of
> > translucency in the content div.