Making Site Opaque -- This Strategy Feasible?

I want to have a link, which when clicked, makes the whole page
"opaque" -- it would look as if the click brought up a veil over the
screen (say, 75% opacity).

I'm thinking it would be possible to somehow use CSS and/or JavaScript
to run different 1KB .png files of varying opacities, stretched to
cover the whole screen, in quick succession in order to produce a
"lightening" or "fade-off to white" (fade-"off" and and not *totally*
fade-out) effect.

Is that technically feasible? Might there be a better way of
achieving the same effect, without calling up different .png files
(even though they'd be really tiny)?

I get the sense that it should be possible...but I'm really not sure
what's "available" vis-a-vis the DOM, much less which "elements" of it
to draw together in what ways!

Again, the strategy is that an onClick would call forth a function
that runs through a series of .png files, as if in an animation, and
these files would be stretched to cover the whole screen, and these
files are such that they make it look like the screen's being veiled.
Possible?? (How???)

Then I would like to write new text on top, somehow...so, it would be
like there are three layers: first the original webpage, then the
"veil" of .png, and finally new text over it all.

Makes sense?


TIA for any advice!!!

Prisoner at War wrote:

I want to have a link, which when clicked, makes the whole page
"opaque" -- it would look as if the click brought up a veil over the
screen (say, 75% opacity).

I'm thinking it would be possible to somehow use CSS and/or JavaScript
to run different 1KB .png files of varying opacities, stretched to
cover the whole screen, in quick succession in order to produce a
"lightening" or "fade-off to white" (fade-"off" and and not *totally*
fade-out) effect.

Is that technically feasible? Might there be a better way of
achieving the same effect, without calling up different .png files
(even though they'd be really tiny)?

This kind of nonsense is for Flash...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Yeah, but that requires installing the Flash plug-in.

If it's otherwise possible -- which it seems to be -- CSS/JavaScript
is more powerful than I'd thought!


Anyway, it's a technical question, not an "artistic" one....



On Apr 26, 3:35 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

This kind of nonsense is for Flash...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Prisoner at War wrote:

Yeah, but that requires installing the Flash plug-in.

If it's otherwise possible -- which it seems to be -- CSS/JavaScript
is more powerful than I'd thought!


Anyway, it's a technical question, not an "artistic" one....

What you want is old MS's proprietary fade transitions filter. When

DHTML was the current "Web2.0" it was sort of popular. It would require
JavaScript and be very messy to get it to work on more that one browser.
... More work that I would be willing to invest. Again, this "effect" is
more in Flash's domain.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2008-04-26, Prisoner at War <prisoner_at_war (AT) yahoo (DOT) com> wrote:

I want to have a link, which when clicked, makes the whole page
"opaque" -- it would look as if the click brought up a veil over the
screen (say, 75% opacity).

I'm thinking it would be possible to somehow use CSS and/or JavaScript
to run different 1KB .png files of varying opacities, stretched to
cover the whole screen, in quick succession in order to produce a
"lightening" or "fade-off to white" (fade-"off" and and not *totally*
fade-out) effect.

Is that technically feasible?

Yes.

Might there be a better way of
achieving the same effect, without calling up different .png files
(even though they'd be really tiny)?

You can also use the CSS 3 opacity property on a div with a background
colour. Although opacity is CSS 3 it's pretty widely supported.

I get the sense that it should be possible...but I'm really not sure
what's "available" vis-a-vis the DOM, much less which "elements" of it
to draw together in what ways!

Again, the strategy is that an onClick would call forth a function
that runs through a series of .png files, as if in an animation, and
these files would be stretched to cover the whole screen, and these
files are such that they make it look like the screen's being veiled.
Possible?? (How???)

If you do it with opacity, just something like this:

function step()
{
opacity += tick;
if (opacity >= 1.0)
{
opacity = 1.0;
clearInterval(timer);
}
veil.style.opacity = opacity;
}

var veil = document.getElementById("veil");
var opacity = 0.0;
var tick = 32.0 / (2.0 * 1000); // two second fade
var timer = setInterval(step, 32);

I haven't tested this so it's probably full of errors, but you get the
idea.

Then I would like to write new text on top, somehow...so, it would be
like there are three layers: first the original webpage, then the
"veil" of .png, and finally new text over it all.

Just put some text on top of the veil. If you use opacity bear in mind
that it affects an element and all its descendents, so you'll be able to
see through the text as well. If you want the text opaque but on a
semi-opaque background the text will have to be in a non-descendent
element (probably a sibling, and they're probably both absolutely
positioned).

CSS 3 also lets you set rgba background colours which enable you to have
a semi-opaque background (using the "a" or alpha component) with an
opaque foreground without needing to create an extra element, but I'm
not sure that's so widely supported.

On Apr 26, 3:53 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

What you want is old MS's proprietary fade transitions filter. When
DHTML was the current "Web2.0" it was sort of popular. It would require
JavaScript and be very messy to get it to work on more that one browser.
.. More work that I would be willing to invest. Again, this "effect" is
more in Flash's domain.

Yeah, but Flash requires a plug-in...besides, I'm still struggling
with CSS/JavaScript! ^_^

I know these effects sound silly, but I've got a legitimate use for
them. And, mostly, it's an educational thing: even if I didn't have a
good use for them it's nice to know what's possible. Part of my
problem right now is that I don't even know the "scope" and "depth" of
what's possible between CSS and JavaScript...I've come across sites
that demonstrate neat tricks, but none really teach -- at best, they
provide a brief outline for an already knowledgeable reader....

I've bought the book "DOM Scripting"...I hope that will answer many
questions....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

On Apr 26, 5:19 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

SNIP

You can also use the CSS 3 opacity property on a div with a background
colour. Although opacity is CSS 3 it's pretty widely supported.

If you do it with opacity, just something like this:

function step()
{
opacity += tick;
if (opacity >= 1.0)
{
opacity = 1.0;
clearInterval(timer);
}
veil.style.opacity = opacity;

}

var veil = document.getElementById("veil");
var opacity = 0.0;
var tick = 32.0 / (2.0 * 1000); // two second fade
var timer = setInterval(step, 32);

I haven't tested this so it's probably full of errors, but you get the
idea.

Just put some text on top of the veil. If you use opacity bear in mind
that it affects an element and all its descendents, so you'll be able to
see through the text as well. If you want the text opaque but on a
semi-opaque background the text will have to be in a non-descendent
element (probably a sibling, and they're probably both absolutely
positioned).

CSS 3 also lets you set rgba background colours which enable you to have
a semi-opaque background (using the "a" or alpha component) with an
opaque foreground without needing to create an extra element, but I'm
not sure that's so widely supported.

Super!! It will take me a while to digest your idea, though...and in
the meantime, may I ask: how about utilizing any CSS 2.x methods?
And, first of all, really -- is your script or pseudo-code there
JavaScript or CSS or both?? Sorry, I'm really not sure where one
stops and the other begins...they're so hand-in-hand, after all!

Thanks again!!

"Prisoner at War" <prisoner_at_war (AT) yahoo (DOT) com> wrote

On Apr 26, 5:19 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

You can also use the CSS 3 opacity property on a div with a background
colour. Although opacity is CSS 3 it's pretty widely supported.

If you do it with opacity, just something like this:

function step()
{
opacity += tick;
if (opacity >= 1.0)
{
opacity = 1.0;
clearInterval(timer);
}
veil.style.opacity = opacity;

}

var veil = document.getElementById("veil");
var opacity = 0.0;
var tick = 32.0 / (2.0 * 1000); // two second fade
var timer = setInterval(step, 32);

I haven't tested this so it's probably full of errors, but you get the
idea.

Just put some text on top of the veil. If you use opacity bear in mind
that it affects an element and all its descendents, so you'll be able to
see through the text as well. If you want the text opaque but on a
semi-opaque background the text will have to be in a non-descendent
element (probably a sibling, and they're probably both absolutely
positioned).

CSS 3 also lets you set rgba background colours which enable you to have
a semi-opaque background (using the "a" or alpha component) with an
opaque foreground without needing to create an extra element, but I'm
not sure that's so widely supported.

Super!! It will take me a while to digest your idea, though...and in
the meantime, may I ask: how about utilizing any CSS 2.x methods?
And, first of all, really -- is your script or pseudo-code there
JavaScript or CSS or both?? Sorry, I'm really not sure where one
stops and the other begins...they're so hand-in-hand, after all!

That code above is JavaScript but it works by changing the style (CSS)
property of an object representing the HTML element with id="veil".

It doesn't matter that it's CSS 3. All the major browsers support opacity.
IE of course implements it differently, although I think newer versions get
it right, but don't quote me on that. One way of handling both (could be
improved somewhat but works):

function setOpacity( id, opacity ) {
var targetStyle = document.getElementById( id ).style;
targetStyle.opacity = (opacity / 100);
targetStyle.filter = "alpha(opacity=" + opacity + ")";
}

On 2008-04-26, Nik Coughlin <nrkn.com (AT) gmail (DOT) com> wrote:

"Prisoner at War" <prisoner_at_war (AT) yahoo (DOT) com> wrote in message
[...]
It doesn't matter that it's CSS 3. All the major browsers support opacity.
IE of course implements it differently, although I think newer versions get
it right, but don't quote me on that.

Opera gets it slightly wrong too, but it doesn't show until you start
nesting opacity contexts.

Here is an obscure example:
http://www.tidraso.co.uk/misc/opacityContexts.html

Firefox gets it right (according to the CSS 3 draft), Opera doesn't.

On Apr 26, 2:43*pm, Prisoner at War <prisoner_at_... (AT) yahoo (DOT) com> wrote:

I want to have a link, which when clicked, makes the whole page
"opaque" -- it would look as if the click brought up a veil over the
screen (say, 75% opacity).

I'm thinking it would be possible to somehow use CSS and/or JavaScript
to run different 1KB .png files of varying opacities, stretched to
cover the whole screen, in quick succession in order to produce a
"lightening" or "fade-off to white" (fade-"off" and and not *totally*
fade-out) effect.

Is that technically feasible? *Might there be a better way of
achieving the same effect, without calling up different .png files
(even though they'd be really tiny)?

I get the sense that it should be possible...but I'm really not sure
what's "available" vis-a-vis the DOM, much less which "elements" of it
to draw together in what ways!

Again, the strategy is that an onClick would call forth a function
that runs through a series of .png files, as if in an animation, and
these files would be stretched to cover the whole screen, and these
files are such that they make it look like the screen's being veiled.
Possible?? *(How???)

Then I would like to write new text on top, somehow...so, it would be
like there are three layers: first the original webpage, then the
"veil" of .png, and finally new text over it all.

Makes sense?

TIA for any advice!!!

I will confess to not having read all the replies here, and the
example I'll mention is pretty old and probably contains a lot of old-
fashioned stuff, but it (according to my notes) works across browsers:
http://srufaculty.sru.edu/david.dail...pasimple3.html

cheers
David