Newgrounds.com — Everything, By Everyone.

CSS:
#box {
background-color:#FFFFFF;
border-width:medium;
border-style:solid;
filter:alpha(opacity=50);
opacity: 0.5;
width:200px;
height:100px;
}
</style>

You can oviously change the width/height/transparency/ect (goes in your head section).

html:
<div id="box">zomfg text</div>

Pilot-Doofy

[ Profile | Posts | Contact ]

Reply To Post Reply & Quote

Posted at: 4/3/06 11:00 PM

LIGHT LEVEL 37

Sign-Up: 09/13/03

Posts: 12,282

There's something you should know about TCStyle's code. Since he is using DIV id's rather than classes, you can only call the id once per page (if memory serves me correctly). This means that you could only have one transparent window in the entire page, unless you want to make another id which is pointless.

I would suggest using a class for this since it could have a multiple occurance on a single page. If you're going to use it for a single side bar or navigational header or something where it would only appear once everytime, then an ID is faster and has its uses.

Meh, you pick.

Not, to change it you'd simply change the # before the id definition to a . (period) and then call it like this:
<div class="box">zomfg text</div>

holy jesus what are these goddamn animals

Absorb

[ Profile | Posts | Contact ]

Reply To Post Reply & Quote

Posted at: 4/3/06 11:08 PM

EVIL LEVEL 11

Sign-Up: 09/12/05

Posts: 323

You can also change opacity percentage fitting your design's need.
50 would be ok.

hey, is this a sig?

SRN

[ Profile | Posts | Contact ]

Reply To Post Reply & Quote

Posted at: 4/4/06 04:17 AM

NEUTRAL LEVEL 04

Sign-Up: 12/13/04

Posts: 57

In most cases it would be easier for cross-browser compatibility to create a seperate image, that appears to be transparent (ie, throwing a 30% alpha'd white square over the origional image in photoshop or fireworks) and set it as the background of the scrolly news thing (if that's what you're referring to.

Alternately some browsers will allow the use of png's that have alpha (ie. firefox), IE does not allow transparent png's as of now. Absolutely positioned divs with transparent png backgrounds make creative and interesting effects. The only drawback is the inability to click through a transparent png -_-

Absorb

[ Profile | Posts | Contact ]

Reply To Post Reply & Quote

Posted at: 4/4/06 07:21 AM

EVIL LEVEL 11

Sign-Up: 09/12/05

Posts: 323

At 4/4/06 04:17 AM, SRN wrote: In most cases it would be easier for cross-browser compatibility to create a seperate image, that appears to be transparent (ie, throwing a 30% alpha'd white square over the origional image in photoshop or fireworks) and set it as the background of the scrolly news thing (if that's what you're referring to.

Alternately some browsers will allow the use of png's that have alpha (ie. firefox), IE does not allow transparent png's as of now. Absolutely positioned divs with transparent png backgrounds make creative and interesting effects. The only drawback is the inability to click through a transparent png -_-

So, a good site would detect wich browser user has.
Like, if he has IE, show image that way...
And if he has FireFox, show image another way.
(To fit browsers)

hey, is this a sig?

SRN

[ Profile | Posts | Contact ]

Reply To Post Reply & Quote

Posted at: 4/4/06 03:03 PM

NEUTRAL LEVEL 04

Sign-Up: 12/13/04

Posts: 57

There are CSS tricks you can use for IE that wouldn't require you to have a browser detection jiggy switch to the proper CSS, although those could be fun anyways. The only problem with that is the fact that there are so many browsers (IE, firefox, opera, netscape, etc.). Having a jpeg that appears to be transparent, but it's really not, might also be a good alternative.

All times are Eastern Standard Time (GMT -5) | Current Time: 01:16 PM

<< Back

This topic is 1 page long.

<< < > >>

Forum Search

You need a Grounds Gold Account to post on the NG BBS! If you don't have one, click here to sign up now! It's fast, free, and easy — and opens up tons of great NG features!