Designing With Transparency For Fine Design

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?

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);

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.

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

You guessed wrong. You had it right, now you’re making the same mistake you made a couple of posts back (and Ryan explained it to you).
Please provide a link to a testing page, so we can take a look at what you’re doing.

Yes, the first part is correct.

Then you provide the fallback below it, like so:


.post {
   color: #ccccff; /* fallback for legacy browser versions */
   color: rgba(255,255,255,.5); /* all other browser versions */
}

This will cause an invalidation error as you shouldn’t declare a property twice, however, this is the best way (imo) to make sure that legacy browsers are not left behind. The first rule is for browsers who don’t understand RGBA, they’ll ignore the second rule, whereas all other browsers who understand RGBA values will use the second rule and overwrite the first.