Designing With Transparency For Fine Design

[Chris77]

Sitepoint Members,
I have a 3 vertical column website with a fluid center column and fixed outside columns. Outside all of the columns I have a background. When you scroll the background image is fixed and the text moves as directed. I need an artisitc idea that shows some of the background in one or more of the columns. The way my site is set up now you really don't get the sense that the text is sliding over the background.
My site is set up like this, but this doesn't have a background outside the columns.
http://www.dynamicdrive.com/style/la...d-fluid-fixed/


Thanks,

Chris

[kohoutek]

You could use RGBA backgrounds for your columns. It'll work in modern browsers, so should you use it, make sure the column content is readable without RGBA or provide a full RGB fallback for browsers that don't understand RGBA.

[Chris77]

Kohoutek.
That's interesting. I didn't know you can control opacity of a color.

Thanks,

Chris

[TehYoyo]

Kohoutek.
That's interesting. I didn't know you can control opacity of a color.

Thanks,

Chris

It's a new CSS3 feature meaning...you can't (in older browsers).

Check out this page to see where you can use it. Since IE8 and 7 can't use it (although thank God that more people are switching to IE9!), it should only be used to enhance a UX, meaning that the site should be fully functional w/out RGBA.

~TehYoyo

[Chris77]

Kohoutek, TehYoyo,

If in the sample website above there's a purple geometric background - undeneath what we can see on the site, if I wanted to put a narrow vertical window in one of the columns, say 400 pixels high by 10 pixels wide, that revealed the geometric purple design, how would that be programmed ?

Thanks,

Chris

[kohoutek]

It'd be good if you could show us exactly what you mean or want to accomplish. Do you have a test page?

[Chris77]

Kohoutek,
How about this: How would I make the text transparent and so showing the background? Is that available for only css3? If so how would I adjust for browsers that can't handle css3?
Right now I have .post{color:#ccccff;padding:1em 0} for the text coloring.

Thanks,

Chris

[kohoutek]

I think it's not a good idea to make the text transparent, for you'd have to do it quite drastically for a background pattern to show through.

But if you were to do it, then I'd use opacity or RGBA, the former having partial support in legacy IE browsers.

[Chris77]

Kohoutek,
I don't see how that would work. Transparency works with a visible image. The background where the text is is not visible.
http://www.w3schools.com/css/css_image_transparency.asp

Are you saying I can color the text with the backgroud image? If so, I wouldn't need transparency.

Thanks,

Chris

[kohoutek]

Transparency works for text as well. You can't color the text with an image.

[Chris77]

Do you have an example of some code that would do that?

[kohoutek]

Why don't you try it out first? If it doesn't work, we can help, but you need to give it a go yourself first.

[Chris77]

ul {background:url(my_bg.png);} or on a list item li{background:url(my_bg.png);}

How is this gong to color text?

When you write, "Why don't you try it out first?"

What does "it" refer to?


Chris

[kohoutek]

I don't quite understand what you are trying to do.

You said you wanted to give text transparency, not an image.

If you want to give text transparency, then you'd use something like:

ul li {
color: rgba(255,255,255,.5);
}

[Chris77]

I have text that is white. I don't want it white. The background is an image. I want the image to show through the text. Is there some simple coding that will do that.

[kohoutek]

I gave you the code above... If you make the text semi-transparent, then anything that is under it, be it a solid color or a background image, will show through.

[Chris77]

How do you provide a full RGB fallback for browsers that don't understand RGBA?

[kohoutek]

Provide a solid color for legacy browsers via conditionals for IE or declare a color with a solid value first, and below it declare color again with RGBA, that way UA who understand RGBA will ignore the first rule and legacy browsers will ignore the second rule.

[Chris77]

how do you declare a color with a solid value first.

[kohoutek]

color: #blah;
color: rgba(blah,blah,blah,.5);

I think it'd be good if you learned the basics of CSS, otherwise you'll have a hard time getting anywhere. How to declare a property is something you should know before touching CSS.

I'd start with simple tasks. This site offers a brief introduction: http://www.cssbasics.com/

[Chris77]

I tried
.post{color:#ccccff;rgba(255,255,255,.5);padding:1em 0}
removed rgba then tried
ul{list-style:none;rgba(255,255,255,.5);margin:0;padding:0}
removed rgba then tried
li{rgba(255,255,255,.5);margin:3.5em 0}

Unfortunately none of these did anything.

Any ideas?

[RyanReese]

All of those are invalid.

RGBA is not a valid property. Validation would have told you that. You seem to have misread kohouteks post. You can EITHER have #000000 (hex) or rgba. One or the other.

color:rgba(255,255,255,.5);

[Chris77]

Ryan,
So I'll try .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}

It just made the text gray. Does .5 have a tendency to make backgrounds gray?

Thanks,

Chris

[kohoutek]

Ryan,
So I'll try .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}

It just made the text gray. Does .5 have a tendency to make backgrounds gray?

Thanks,

Chris

It makes the text 50% transparent (0.5). You can have values from 0-1 and 0.5 is 50% off whatever solid color or background color you have declared.

In your example, you've used white and declared that it should be 50% transparent. What you see as grey is actually the transparency and the background color/image showing through.

[Chris77]

So on .post{color:#ccccff;color:rgba(255,255,255,.5);padding:1em 0}
I guess that should be
.post{color:rgba(255,255,255,.5);padding:1em 0}
so where would the full RGB fallback for browsers that don't understand RGBA go?
Two lines in css?
.post{color:#ccccff;padding:1em 0}
.post{rgba(255,255,255,.5);padding:1em 0}

Thanks,

Chris