| Nov 23, 2009 |
I never known that you could do transparancy in CSS!Thanks!
QUOTE(Habble @ Jun 18 2007, 03:16 AM)  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: CODE .classtyle { Best regards,filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; }
QUOTE(TavoxPeru @ Jun 19 2007, 04:17 AM) 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: CODE .classtyle { Best regards,filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; } Yes, I use filter, for IE, and -moz-opacity for Firefox/Mozilla What browser is "opacity" for? I've never seen it.
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,
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).
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!
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)
QUOTE(late443 @ Jun 20 2007, 10:59 PM) 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,
Transparency can look real nice on a website, depending on the overall look on your site. I might use it soon. Good that I found this topic for it, hehe.
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.
Latest Entries
Text box background transparency/opacity
Transparency Hi. I don't usually make websites or work with HTML very much, but I've an assignment to make a webpage to compile my research for a project in my media literacy class. I have the thing built and hosted and such, set up with a scrolling text box to display the links. At the moment it's very rough, but I had intended to get the basics set up before adding any real content. I've got most everything ironed out except for one thing. I've got a picture set as the background which I really wanted to faintly show through the background of the text box; I wanted white with an opacity of something like 30%. I've done this before, scrolling text boxes with transparent or semi-transparent backgrounds on photos, used in forums and not permanently affixed on a website. I cannot seem to get it to work this time, and I spent roughly four hours re-writing the code for the text box to try and figure it out last night before I gave up around midnight, and I found a number of websites detailing how to do it--it's not working. I'm probably doing something wrong, but for the life of me, I can't figure out what it is. Can anyone help me out? I'll link the website, so you can see what I mean. You can probably see the html I've been messing with by right clicking and pressing view source. Http://communicatemusic.Webs.Com/Communicate_Music.Html Thanks so much for any help you can give me! -Sen QUOTE(gamersspace_net @ Sep 15 2007, 01:22 PM) I need help with this if anyone has time? I need to add Transparency to this: CODE .jspc_core_div{ height:100%; width:100%; float:left; margin: 0 0 0px 1px; overflow: auto; background: #fff; Help is much appreciated! James CODE .jspc_core_div{ What it does is to make your class 75% transparent.height:100%; width:100%; float:left; margin: 0 0 0px 1px; overflow: auto; background: #fff; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; } Best regards,
I need help with this if anyone has time?
I need to add Transparency to this: CODE .jspc_core_div{ height:100%; width:100%; float:left; margin: 0 0 0px 1px; overflow: auto; background: #fff; Help is much appreciated! James
Ok, well for opacity, the child elements/content inherit the value also, so therefore your text would be opaque also.
That's good if that is what you want, but you may want to consider the alpha value also. What's the difference between these two examples: CODE p{opacity:0.4;filter:alpha(opacity=40);-webkit-opacity:.4;background-color:rgb(0,0,255)} and CODE p{background-color:rgba(0,0,255,0.4)} One uses RGBA and the other opacity. Notice that I am controlling background-color. Since it is only background, the second example will have 100% opaque text, and a 40% transparent background. The first example will have 40% transparent background and text. *The -webkit-opacity is used to support Safari. opacity is for Mozilla(Gecko) and Opera. filter is for Internet Explorer (Trident). |
 Transparency - Do/Would you use it? |
Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com
