Jump to content

CSS Tranparency


fullphaser

Recommended Posts

a:visited {-moz-opacity:.6; opacity:.6; filter: alpha(opacity=60);}#subii{filter:alpha(opacity=70); -moz-opacity:.7; opacity:.7;}

Is there any way to validate transparency with CSS2 and such?

Link to comment
Share on other sites

It may display it correctly, but as fullphaser points out, it's not a vlid code we're talking about.

Link to comment
Share on other sites

Well the wierd thing is that it isn't validating any of that bit of CSS it seems anything that is even on the edge isn't considered valid and the -moz-opacity is similar to -khtml-opacity; it is designed for older versions of Firefox and Safari (or so I am told, that firefox<1.0 doesn't read opacity but wil read -moz-opacity or something to that effect, that is just what I am told)

Link to comment
Share on other sites

so I'm guessing

#id {background:transparent;}

is not valid? I've never used it, but I've seen it done and wondered about it.

Link to comment
Share on other sites

Right and the code displays correctly crossbrowser wise :) but it is the W3 Validation that concerns me considering that it is all technically CSS3 (or atleast that is how I understood things to be)
Link to comment
Share on other sites

It's an amazing feature, but if you nest divs the 'inner' divs inherit that property. It 'ruins' my hack to add a dropshade to a div. So now if I decide to add a background the entire textarea is transparant instead of just the dropshade. IMHO that kinda sucks. All 'cheesehacks' are sticky anyway... :)

Link to comment
Share on other sites

I've never really worked with transparency... I'm playing with it right now and I see that the text inside a div also gets affected by the transparency. How do I have text 100% opacity and div background to 20%???Edit: NVM found it on that link.

Link to comment
Share on other sites

I adapted a fullscale background topic to make something that might serve your needs. Here's the CSS:

body {	font-family:verdana, arial, sans-serif; 	font-size:76%;	margin:0; 	padding:0; 	width:100%; 	height:100%; 	overflow:hidden;	background-image: url(http://www.seemydesign.com/livingroom/elementsideas/designelements/pattern/fabric_types/speckle_mauv_m.jpg);}#transparant {	position:absolute; 	z-index:1; 	width:80%; 	height:80%;	padding:20px;	opacity:0.3;	background-color:#ffaaff;}#scroller {	position:absolute; 	width:80%; 	height:80%; 	top:0; 	left:0; 	overflow:auto; 	z-index:2;	background-color:#aaffff;} #content {	background-color:ffffaa;	margin-right:30px;	margin-left:30px;	margin-top:10px;	margin-bottom:10px;}

And here's the HTML:

<html><head><link rel=stylesheet type="text/css" href=transparency.css></head><body><div id=transparant></div><div id=scroller><div id=content>Insert content here</div><div id=content>Insert new content here</div></div></body></html>

What I'm doing is putting one div on top of another. Here's what it might look like. It's quick & messy but there's plenty of brains on these forums to make it into something pretty. :) Knock yourselfs out.EDIT as it appears, this thing doesn't seem to work with IE6 but I have no problems using Firefox 1.5. Using IE6, the transparant background div doesn't show up.

Link to comment
Share on other sites

Heh, yeah well enough so that IE 6.0 and Firefox 1.5 and Opera 8 can all read it  :) all other browsers mean nothing  :)

Opera 8 doesn't support opacity.http://www.domedia.org/oveklykken/css-transparency.phpLook at that site in Firefox and Opera, and compare.
Link to comment
Share on other sites

Opera 8 doesn't support opacity.http://www.domedia.org/oveklykken/css-transparency.phpLook at that site in Firefox and Opera, and compare.

Oh, heh I could have sworn It was reading what was I smoking? hmm... thats odd... I thought for sure that it was supporting it on an older version of the site. :)
Link to comment
Share on other sites

You must have been smoking something, cause Opacity won't be supported until Opera 9.0 (look up "Display".:)Maybe you were viewing it in Opera 9.0 Beta? I dunno...

Link to comment
Share on other sites

In any case, there's too little consistency in css support for browsers. IE6 sucks big time if you have to write a fancy css to work for that, FireFox (1.5) works just fine (it's a browser you can actually have a 'conversation' with) and Opera seems to care more about it's own versatility and usability than about plugin support.I dunno... it just feels like CSS support should be a plugin like Javascript or Flash. Something not much unlike a GNU module, which you can get documentation and dev modules for.These kinds of fora sure makes it a lot more easy to get what you're looking for. My webpage now has an 'about' section which states the site is written for FF1.5 and adapted for IE6. Couldn't have done it without your help.This fancycat has learned a whole new batch of tricks and I owe you guys. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...