PDA

Click to See Complete Forum and Search --> : Valid Transparency

Jona
08-18-2004, 12:32 PM
Hey guys,

I was wondering if there was a way to use valid CSS for transparency filters, without having to use JavaScript. Any clues?

Thanks.
Jona
08-18-2004, 12:38 PM
The CSS3 specification (http://www.w3.org/TR/2003/CR-css3-color-20030514/#opacity) shows that the opacity property does exist, yet the validator considers it invalid; would, currently, all CSS3 be invalid?
Fang
08-18-2004, 01:27 PM
If you use the advanced css validator (http://jigsaw.w3.org/css-validator/validator-text), you will see that it does validate for css3 only.
Jona
08-18-2004, 01:30 PM
Originally posted by Fang
If you use the advanced css validator (http://jigsaw.w3.org/css-validator/validator-text), you will see that it does validate for css3 only.

Thanks. Any clue what to do for IE, or is there no alternative to JavaScript? (If there isn't, I won't use JavaScript anyway. :p)
Paul Jr
08-18-2004, 01:38 PM
I don't see what the big deal is. I use code that causes the validator to puke up errors, but it doesn't concern me because the code isn't really invalid — not my fault if the validator doesn't like it. If worse comes to worse and you have to use some IE-proprietary invalid stuff, oh well; sacrifices must be made.
Jona
08-18-2004, 01:40 PM
Originally posted by Paul Jr
sacrifices must be made.

Which means IE users just won't have transparency. ;) Their loss. :D
Paul Jr
08-18-2004, 01:44 PM
Originally posted by Jona
Which means IE users just won't have transparency. ;) Their loss. :D
Bingo. :D
Fang
08-18-2004, 01:46 PM
div {
opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.
Jona
08-18-2004, 01:56 PM
Originally posted by Fang
div {
opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.

lol. Thanks, but I should have been more clear; I knew all three properties, but I didn't know if there was another obtuse way to make it "valid" and at the same time work for IE.
ChrisBrown
09-22-2004, 12:35 PM
So how would I write this so that it would identify which browser is being used?

Also, the IE CSS listed - does it work in IE 6?

What about Safari?

I'd like to try it.
Jona
09-22-2004, 12:49 PM
Originally posted by ChrisBrown
So how would I write this so that it would identify which browser is being used?

Also, the IE CSS listed - does it work in IE 6?

What about Safari?

I'd like to try it.

Use both, the browser will only translate what it understands. Yes, it will work in IE6; if anything works for Safari it will be opacity. If you'd like to try it, what is holding you back?
ChrisBrown
09-22-2004, 12:55 PM
I'm afraid of trying it.

I'm just an efficiency freak, so I didn't want to waste my time this morning if it wasn't going to work well - but I usually just try stuff and see - I'm just busy this morning.
Jona
09-22-2004, 12:57 PM
...I see. Well, if it's worth working, it's worth trying. ;)
ChrisBrown
09-22-2004, 01:24 PM
Ok, this did the opposite of what I really wanted - i would like the background to be transparent in the DIV. Let me re-phrase - I want to adjust the opacity of the background - sorry.

Is that possible?
crh3675
09-22-2004, 01:34 PM
You can generate it with javascript. Mozilla will interpret the javascript attribute as :


<html>

<body>

<div id="moz" style="background-color:black;width:100px;height:50px;">
</div>


<script>

document.getElementById("moz").style.MozOpacity=.5;

</script>

</body>
</html>
ChrisBrown
09-22-2004, 01:54 PM
What I ended up doing for now is placing two divs on top of each other - #1 is just the background, given an opacity value, and #2 is the actual content.
Fang
09-22-2004, 02:17 PM
That's the only way it works in Moz. and IE.
In IE this does work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.opaque {filter: alpha(opacity=20); -moz-opacity: .2;}
.styling {
width:10%; /* must have width */
padding:5px;
color:#000;
background:#f00;
}
.normal {position:relative;}
-->
</style>
</head>
<body>
<div class="opaque styling"><div class="normal">XXXX</div></div>
</body>
</html>
Stephen Philbin
09-22-2004, 05:06 PM
I just use a .png with the desired opacity level and screw IE users untill they get a browser. F*** 'em I say.
ChrisBrown
09-22-2004, 05:34 PM
The problem is I know I have a lot of IE users, so I have to accomidate them.
Stephen Philbin
09-22-2004, 06:47 PM
Yeah I used to think that. But now my allowances made for IE are minimal at best, regardless of what the audience may be. They can see a decenet site when either they get a decent browser or MS make one.

My pages have caused quite a few people to get a decent browser now. Certainly not my sole reason for taking such an attitude, but definately good to see a little more variety filtering through.

I'm not gonna do shedloads of un-necessary work just because the worst browser on the net happens to be the most popular. Like I said: "F*** 'em".