CSS Transparencies

  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

My site at http://mikeshell.afraid.org/hell/
has css defination of
Code: [ Select ]
TABLE{
        FILTER: alpha(opacity="80");
}
  1. TABLE{
  2.         FILTER: alpha(opacity="80");
  3. }


but i want to make it so that images inside tables...and outside are opaque...

I tried
Code: [ Select ]
IMG{
        FILTER: alpha(opacity="100");
}
  1. IMG{
  2.         FILTER: alpha(opacity="100");
  3. }


But it was just a guess.
Was trying to look it up online, didn't find anything but this site :)
thanks in advance.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sumen wrote:
but i want to make it so that images inside tables...and outside are opaque...


If images inside tables and outside tables are opaque, then they all are :wink:

Io you mean you just want the ones <i>inside</i> the tables to be at 80%
Code: [ Select ]
TABLE IMG{
   FILTER: alpha(opacity="80");
}
  1. TABLE IMG{
  2.    FILTER: alpha(opacity="80");
  3. }


if thats not what you need then post back
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

No, sorry, should've explained better. I want the images to be non transparent, but everything else transparent.
I figured this would work then after ur example:
Code: [ Select ]
TABLE IMG{
   FILTER: alpha(opacity="100");
}
  1. TABLE IMG{
  2.    FILTER: alpha(opacity="100");
  3. }

but no go :(
anyone know how I can go about it?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Um the simple answer is you cant.

What is happening is that the table, and everything in it, is being made 80% transparent. Setting the images to 100% makes them 100% of 80% = 80%

You could try a image transparency >100% but I very much douvt that will work.

Now for the complicated answer. You could take the images out of the table and position them using position absolute or something.

Or there could be a way to do it without transparency.

Is there a link so you can show me what you are trying to achieve?
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

http://mikeshell.afraid.org/hell/news.php

I want all the images however to be Opaque.
while the rest of the tables are translucent.

another thing is that in some cases there might be a table inside a translucent table that I would want Opaque...if im taking 100% of 80% how would I go about doing that?


Another question, any advice on reducing the lag caused by these transparencies? Besides getting rid of them :P
I enjoy the look it gives alot, but I guess I might end up having to get rid of them...
-thanks in advance
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ok. The lag I assume is the browser getting to grips with rendering the semi-transparent areas. I dno't know though.

I thought occurs that you could use a class to make certain table cells transparent.
Code: [ Select ]
td.trans{
   FILTER: alpha(opacity="80");
}
  1. td.trans{
  2.    FILTER: alpha(opacity="80");
  3. }


This would require a small amount of re-writting of the CMS script to get the classes on the appropriate cells.

I agree the effect is extremely cool, but that is probably the best way to get it working.

You might also want to look into transparency in mozilla as well. The filters only work in internet explorer but you can put in the filter and the mozilla transparency together. (i don't remeber the css property for that though)

BTW, I thought I'd let you know: your sig is too big, the mods'll make you get rid of it, no matter how cool it looks :D
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

Thanks.
I was afraid of I'd have to do that....

but what if i wanted a td inside a translucent td to be opaque....
would that not be possible for the same reasons?
even if i write new css definitions so that only certain ones are transparent and not all?


and i figured the lagging was for the same reason, especially from images being transparent over the background. One of several reasons I wanted to get them opaque.

About Mozilla, I noticed that too. Except I don't know how to get it transparent there either. I looked at a site which did have transparent tables for netscape/mozilla and it had definitions like
Code: [ Select ]
background-color: transparent;

But that did not seem to work for me when I added it to TABLE {}

Thanks for the warning on my signature. I've always been able to get away with it being big. Guess ill shrink it 8) .

I appreciate your patience and your swift answers.
  • DR01D
  • Expert
  • Expert
  • User avatar
  • Posts: 661
  • Loc: Australia

Post 3+ Months Ago

what about using a transparent gif in some of the nesting table/cell backgrounds
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

How?
I went into macromedia fireworks and made a 1 pixel black dot w/ an 85 percent opacity...lol and then exported it as a gif....and it didn't work...and then a png...and it still didn't work...background comes out looking grey???
ive never really made a transparent picture before..or delt w/ transparencies in webpages either...
I just saved the .png w/o exporting just to make sure that wasn't the problem...still grey

Code: [ Select ]
.bodytable {
    background-image: url(images/pixel.png);
    background-color: #000000;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    color:#ffffff;
}
  1. .bodytable {
  2.     background-image: url(images/pixel.png);
  3.     background-color: #000000;
  4.     padding-bottom: 8px;
  5.     padding-left: 8px;
  6.     padding-right: 8px;
  7.     padding-top: 8px;
  8.     font-family: verdana, arial, helvetica, sans-serif;
  9.     font-size: 10px;
  10.     font-style: normal;
  11.     color:#ffffff;
  12. }


http://mikeshell.afraid.org/hell/

there you'll see that its all grey...
heres how I thought you would make a transparent gif/png ....

Image

Am I making the image wrong or doing the code wrong?
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

I just looked at it in Mozilla....seems to come out looking transparent there...
Im aiming more towards IE..since most people use it and all...help
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Sumen: Your sig graphic needs to be altered to conform to Ozzu policies.

Bigwebmaster wrote:
Signatures
  1. Signatures may contain up to three lines (one line being that displayed on a browser opened to 800px width) of text (of small or normal size) and/or one image, valid combinations include; a single image of no more than 100px high, 468px wide and 6KB in size. Signatures containing an image this large may also include one line of small size text. Signatures containing an image of 15px high or less may include two lines of small size text. Any signature can contain a maximum of only 2 links.


Thanks!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

told ya that was going to happen.

semi-transparent .gifs don't exist.

semi-transparent .pngs do, but IE does not support them.

There is a IE property that allows it to support png translucency. I don't know how it works but info can be found here:

http://www.alistapart.com/articles/cssdrop2/

it's somewhere near the bottom
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

Thanks.
But im not sure how to add that property so that the .bodytable will have a background which is a semi transparent png.

Code: [ Select ]
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pixel.png',sizingMethod='scale');


Im not sure where to use that.

I also found this on the same site, but it gave the same information. I want the bodytable class to have a background that is a semi transparent png in images/ called pixel.png, in Internet Explorer. And I'm not sure how to do it even with the resources you provided me.

Thanks for any help
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Not sure if it's the same one as ALA's, but If you copy the inline javascript from my personal web, you can use it to correct PNG transparency for IE 5.5 and higher.

http://www.chriscarney.com/

;)
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

I put that script in a test page in the head tag.
And i wasn't sure but it looked like I didn't have to do more than just set the png as the background of tables...
but it didn't work?
http://mikeshell.afraid.org/hell/test.htm

I suck at this...thanks for anyhelp...again
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Ahhh sorry. My bad. That script is looking for IMG tags. I should have read the thread better.
:oops:
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

I found a site that discusses this idea
http://regretless.com/dodo/newworld/ind ... anspng.php

I even downloaded the demo and looked at the code and watched it work!
but its not working on mine.....I even just copied the definition for the table class they made and renamed it bodytable at one point...no go...
this is what I have:

Code: [ Select ]
.bodytable {
     background-image: url(images/pixel.png);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    color:#ffffff;
}

/* stop child elements inheriting the parents alpha opacity in ieWin */
.bodytable* {
/* A position:absolute or position:relative is required for ieWin to actually set the filter? */
position:relative;
}
  1. .bodytable {
  2.      background-image: url(images/pixel.png);
  3.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
  4.     padding-bottom: 8px;
  5.     padding-left: 8px;
  6.     padding-right: 8px;
  7.     padding-top: 8px;
  8.     font-family: verdana, arial, helvetica, sans-serif;
  9.     font-size: 10px;
  10.     font-style: normal;
  11.     color:#ffffff;
  12. }
  13. /* stop child elements inheriting the parents alpha opacity in ieWin */
  14. .bodytable* {
  15. /* A position:absolute or position:relative is required for ieWin to actually set the filter? */
  16. position:relative;
  17. }


I dont know why this isn't working: http://mikeshell.afraid.org/hell/
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Similar question :):
I want to have the background of one of my DIVs to be a certain color but with transperancy of lets say 75%. Is there a way to do it ?
Something like this:
Code: [ Select ]
background-color: "grey";
FILTER: alpha(opacity="80");
  1. background-color: "grey";
  2. FILTER: alpha(opacity="80");

A link to a tutorial on CSS transperancies will also be greatly appreciated :) .
  • GT500Shlby
  • Guru
  • Guru
  • User avatar
  • Posts: 1205
  • Loc: Philadelphia, PA

Post 3+ Months Ago

In short, you can't.

Create another layer that sits behind the layer with your data, and make that layer opaque while the top layer has no background. It's technically wrong, but M$ does their own thing at the demurral of the W3C. And the W3C doesn't have the balls to call them on it.

<rant>
I propose a 3rd party browser extension for IE and Mozilla that registers .xhtml, .xml, .xslt (and so forth) extensions to a strict engine that draws the page according to the guidelines set forth by the W3C and the language standards within. Therefore, we can all write one page that works with all browsers.

If they can write browser hijackers for scumware, we can use it to force compliance and be able to actually use some of these emerging technologies. We have the language standards but the browsers are at least 3 revisions behind.

One set of rules for all browsers, all platforms, no exceptions. And if M$ and Mozilla don't like it, they can toss my salad whle I have diarrhea.
</rant>

But that's just my $0.02 :asshole: :gun4:
  • Mr Smith
  • Graduate
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

Sumen wrote:
How?
I went into macromedia fireworks and made a 1 pixel black dot w/ an 85 percent opacity...lol and then exported it as a gif....and it didn't work...and then a png...and it still didn't work...background comes out looking grey???
ive never really made a transparent picture before..or delt w/ transparencies in webpages either...
I just saved the .png w/o exporting just to make sure that wasn't the problem...still grey

Code: [ Select ]
.bodytable {
    background-image: url(images/pixel.png);
    background-color: #000000;
    }
  1. .bodytable {
  2.     background-image: url(images/pixel.png);
  3.     background-color: #000000;
  4.     }




hm,
where you have
Code: [ Select ]
background-image: url(images/pixel.png);
    background-color: #000000;
  1. background-image: url(images/pixel.png);
  2.     background-color: #000000;


there are a couple of things wrong;
first, your image url needs to be in single quote marks, i.e
Code: [ Select ]
background-image: url('images/pixel.png');


second, you need to declare the background image and colour as one declaration, not two, so rewrite your above original code to read

Code: [ Select ]
background:#000000 url('images/pixel.png');


that should now (hopefully! 8) ) work

Joe
:D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sorry about this but I need to correct you on these:
Mr Smith wrote:
there are a couple of things wrong;
first, your image url needs to be in single quote marks, i.e
Code: [ Select ]
background-image: url('images/pixel.png');


Nope, I always leave off the quotations, it works in all browsers and validates :P
Quote:
second, you need to declare the background image and colour as one declaration, not two, so rewrite your above original code to read
Code: [ Select ]
background:#000000 url('images/pixel.png');


Again nope, the shorthand is optional. Either method is perfectly valid and will work in all browsers.

NB: "all browsers" = "all browsers worth mentioning", probly won't work in NSN4, but who cares.....
  • Mr Smith
  • Graduate
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

rtm223 wrote:
Sorry about this but I need to correct you on these:
Mr Smith wrote:
there are a couple of things wrong;
first, your image url needs to be in single quote marks, i.e
Code: [ Select ]
background-image: url('images/pixel.png');


Nope, I always leave off the quotations, it works in all browsers and validates :P
Quote:
second, you need to declare the background image and colour as one declaration, not two, so rewrite your above original code to read
Code: [ Select ]
background:#000000 url('images/pixel.png');


Again nope, the shorthand is optional. Either method is perfectly valid and will work in all browsers.


hm, probably should have wrote my words better; rather than being wrong, i meant that it's better to use shorthand code if possible to save time writing it etc.....no point writing two lines of code to acheive one :?
the quotes thing is just out of habit :wink:

Quote:
NB: "all browsers" = "all browsers worth mentioning", probly won't work in NSN4, but who cares.....


lol :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Mr Smith wrote:
it's better to use shorthand code if possible to save time writing it etc.....no point writing two lines of code to acheive one :?

because I forget the order it has to go in :P it takes me longer to go to the w3c spec and find the shorthand syntax that it does to write both lines :lol:
  • [Frost.]
  • Born
  • Born
  • User avatar
  • Posts: 1
  • Loc: accurate to within 3 feet

Post 3+ Months Ago

Hmph.

Code: [ Select ]
<center>
<img title="The road to nowhere..." height="333" alt="The road to nowhere..." src="/assets/system.image_vault/846.jpg" width="404" style="border: 1px solid #000000;" />
<div style="margin-top: -75px;">
<div style="background: #ffffff; filter: progid:dximagetransform.microsoft.alpha(opacity=40); width: 300px; height: 48px; -moz-opacity: 0.40;"></div>
<div style="margin-top: -38px; font-size: 16pt; color: #ffffff; font-family: verdana, arial, helvetica, sans-serif; text-align: center;">Translucent Box</div>
</div>
</center>
  1. <center>
  2. <img title="The road to nowhere..." height="333" alt="The road to nowhere..." src="/assets/system.image_vault/846.jpg" width="404" style="border: 1px solid #000000;" />
  3. <div style="margin-top: -75px;">
  4. <div style="background: #ffffff; filter: progid:dximagetransform.microsoft.alpha(opacity=40); width: 300px; height: 48px; -moz-opacity: 0.40;"></div>
  5. <div style="margin-top: -38px; font-size: 16pt; color: #ffffff; font-family: verdana, arial, helvetica, sans-serif; text-align: center;">Translucent Box</div>
  6. </div>
  7. </center>


The <img ...> tag contains the style="border: #000000 1px solid;", drawing a 1-pixel wide border around the perimeter of the image.

The first <div ...> is a container for the box and text. It tells a browser to render it 75 pixels higher than it otherwise would . It would normally render it below the image.

The second <div ...> is the crucial one.

Code: [ Select ]
filter: progid:dximagetransform.microsoft.alpha(opacity=40);
for IE
Code: [ Select ]
-moz-opacity: 0.40;
for Mozilla

This works on IE 6+ and Mozilla browsers from Firebird 0.6.1 and up.

[blur]Further, I would hope it was obvious that all names and sources are examples and should be replaced with your own data...[/blur]

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 10 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.