Jump to content
xisto Community
iGuest

Transparency Do/Would you use it?

Recommended Posts

I recently found out that you can put transparency in websites using CSS, (I didn't know that!), and I'm making a website that contains transparent panels. With Internet Explorer you can only use transparency with absolute positions, which is a bit of a nuisance.Would/do you use transparencies? They lopok good, but if theyre too transparent, it can be hard to read text, and some form elements still appear opaque in IE, which makes it look weird.

Share this post


Link to post
Share on other sites

I recently found out that you can put transparency in websites using CSS, (I didn't know that!), and I'm making a website that contains transparent panels. With Internet Explorer you can only use transparency with absolute positions, which is a bit of a nuisance.Would/do you use transparencies? They lopok good, but if theyre too transparent, it can be hard to read text, and some form elements still appear opaque in IE, which makes it look weird.

I think that you can use transparency not only with absolute positions, also with elements without it, also, take care of this because in IE you use the alpha filter to apply this behavior and the filters are not part of the standard, if you look your page in FF you will notice that it does not work.

So, if you want to apply transparency you use the -moz-opacity for FF, the filter:alpha for IE and the opacity for any CSS3 compliant browser. For example something like this will work:
.classtyle {  filter:alpha(opacity=75);    -moz-opacity:.75;  opacity:.75;}
Best regards,

Share this post


Link to post
Share on other sites

I think that you can use transparency not only with absolute positions, also with elements without it, also, take care of this because in IE you use the alpha filter to apply this behavior and the filters are not part of the standard, if you look your page in FF you will notice that it does not work.
So, if you want to apply transparency you use the -moz-opacity for FF, the filter:alpha for IE and the opacity for any CSS3 compliant browser. For example something like this will work:

.classtyle {  filter:alpha(opacity=75);    -moz-opacity:.75;  opacity:.75;}
Best regards,
Yes, I use filter, for IE, and -moz-opacity for Firefox/Mozilla
What browser is "opacity" for? I've never seen it.

Share this post


Link to post
Share on other sites

It is part of the upcoming CSS 3 standard and as i know will be the prefered method to use for applying transparency.Best regards,

Share this post


Link to post
Share on other sites

Newer versions of Mozilla Firefox don't need the moz-opacity attribute - they are already set up to use opacity instead (which is, of course, a good thing).

Share this post


Link to post
Share on other sites

Yes, I recently tried out my website in Safari (The Windows version) and it wouldn't work with filter or -moz-opacity, so I tried Opacity like you suggested, and now it works. Thanks!

Share this post


Link to post
Share on other sites

i have used transperency on my website before. it works best when u no what your doing i had a little bit of a difficult time but once i understood it i made a great web page the only thing i had to watch out for was choosing the background to make sure that the text was still read abal and what not so yes i suggest that using transparency is a fine way to make your site look even better (depending on the type of website)

Share this post


Link to post
Share on other sites

i have used transperency on my website before. it works best when u no what your doing i had a little bit of a difficult time but once i understood it i made a great web page the only thing i had to watch out for was choosing the background to make sure that the text was still read abal and what not so yes i suggest that using transparency is a fine way to make your site look even better (depending on the type of website)

As you, i also had some difficult time with the use of transparency especially when i tested in other browsers different than IE -why always complicate our lifes?-, after know that exists -moz-opacity and that it is the rule to apply to FF and alikes every thing goes fine, now with the upcoming CSS 3 which includes the opacity property i think a lot of things will be better.
Best regards,

Share this post


Link to post
Share on other sites

Also, I found out recently, you can use semitransparent PNGs as backgrounds etc. for websites, and this stops any elements inside it from becoming transparent.

Share this post


Link to post
Share on other sites

Yeah but they dont work in internet explorer, i dont no if they will work in internet explorer seven or not since that has png transparency.

Share this post


Link to post
Share on other sites

well im working on a site that will change the stylesheet to use css transparency in IE6. other browsers will use transparent png's so ie 6 wont look as good i dont reckon.i dont have a site at the moment using css transparency http://forums.xisto.com/no_longer_exists/ uses (a little too much) css transparency. habble made it :blink:

Share this post


Link to post
Share on other sites

well im working on a site that will change the stylesheet to use css transparency in IE6. other browsers will use transparent png's so ie 6 wont look as good i dont reckon.
i dont have a site at the moment using css transparency

http://forums.xisto.com/no_longer_exists/ uses (a little too much) css transparency. habble made it :D



Haha : D well ok i guess css transparency arent that revolutinary, but i guess it could be used for something way prettier. but i think people is gonna have a hard time doing transparent borders around wordpress templates fx.

I think people is gonna use png's instead to get their fancy webpages working :blink:

Share this post


Link to post
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...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.