Sorry Internet Exploder users
This style makes use CSS3 and the alpha channel, using the background-color: rgba(255,255,255,0.2);
notation to set the opacity of a single element as opposed to the background-color: rgb(0,0,255); opacity: 0.5;
notation, which would set the opacity for that element and any child elements.
This way I can set the opacity of the border and not have it effect the opacity of the text contained inside of that div.
Sadly this is not supported in Internet Explorer. Although it is still in the early stages of development
Microsoft is actually working to provide support in ie9. From the information over at CSS3.info, they scored a 574 out of 578
in the CSS3 selectors test. So, it looks like help is on the way. Now all we need to do is officially put ie6 and below out
to pasture.
But... But
I can hear you. "But Jim, you can still do this and let Internet Exploder play along too."
This is true, but that would involve transparent .png files, and one of the
myriad of hacks required to
allow ie6 to display the transparencies correctly. The whole idea was to achieve the effect without the use of images.
The only images on the page are the star field in the background and the shooting star in the header. I wanted to go with
a spacey feel. I had set it up using a jQuery script and 3 separate backgrounds using backgroundPosition
to create a moving parallax effect, which worked well, but chewed up 100% of the CPU.
"But Jim, you can still do this and let Internet Exploder play along too."
Main body Background
The background of the page wrap is set to black, with the opacity lowered very slightly.
background: rgba(0,0,0,0.6);
This was done so that I still achieve the effect yet the background image does not show through at full strength
and compete with the text on the page. This way it just sort of fades into the
background as the users concentrate on
the page content.