How is this done?

HTML & CSS
1

How is this done with the semi transparent thing on the upper thing and the “wrapper” going up in it on http://www.netdreams.co.uk/

And btw, as you can see ive created like 100 threads already, but I wanna learn webdesign sooo much! :confused:

Thanks

2 
div#top {
    background: url("css/images/top-bg.png") repeat-x;
    height: 137px;


}

That’s the code for that grayish transparent part. It is a PNG image which allows for alpha transparency. That’s how the transparency look is given :).

Off Topic:

66 posts and you’ve made 100 threads? :stuck_out_tongue:

3

Thanks.

HAHHAHAH :smiley:

4

Keep in mind that, in CSS3, there is a new added alpha (transparency) channel. As such, you can define transparency in the color, like:


background-color:RGB[b]A[/b](0,0,0,0.5);
width:x;
height:y;

That would be a semi-transparent black.

Another way is opacity.


background-color:RGB(0,0,0);
opacity:0.5;
height:y;
width:x;

Although it is CSS3 and both are semi-supported - RGBA — [URL=“http://caniuse.com/#search=opacity”]Opacity

~TehYoyo

5

Ty, overclass for me now. Ill try stick with the basics first :stuck_out_tongue:

6

Just making sure you keep it in mind :smiley:

Always useful, I find.

~TehYoyo

7

Yep.

I do as much as i can.

8

I’d suggest the opacity property as TehYoyo suggested, since RGBA support is… sketchy at best. If you use the opacity property and a IE filter you have to worry that anything inside your DIV will ALSO have transparency applied to it – and you probably don’t want that. The solution is a empty sandbag DIV before all your content.

<div class=“opacitySandbag”></div>


.opacitySandbag {
	height:100px;
	margin-bottom:-100px;
	background:#000;
	opacity:0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
}

While it takes an extra markup element, it also happens to work all the way back to IE 5.5. Basically the margin-bottom just makes everything after the div ride up over it. It also means you don’t have to play with positioning, or worry about opacity inheriting to any child elements. If the div was wrapping your header area content, delcaring opacity on it would also make everything in the header transparent – and you probably don’t want that.

Of course, if legacy versions of IE supported :after and :before properly, you could also add the extra sandbag that way; unfortunately they don’t. You could use an expression to fake it, but that ends up being a needlessly complex mess – at which point, just use the sandbag.

… and in this case I’d do this long before I’d go for an alpha transparent .png – but as a rule of thumb I don’t consider alpha transparent images to be viable for web deployment due to the larger filesizes, unusual cross browser behaviors, need for filters to make them work in legacy IE… etc, etc…