If possible, do I need special software? (Don't see how it can be done with 'straight' HTML.)
Background Fading - possible? - hopw to?
Started by
911pchelp
, May 03 2006 11:51 AM
#1
Posted 03 May 2006 - 11:51 AM
911pchelp
-
- Member
-
- 290 posts
Member
If possible, do I need special software? (Don't see how it can be done with 'straight' HTML.)
#2
Posted 03 May 2006 - 12:19 PM
TaNkZ101
-
- Member
-
- 327 posts
Member
if you have fireworks or photoshop it's like 2 clicks- use the gradient tool. I don't think it's possible in html, but i'm not sure.
#3
Posted 03 May 2006 - 03:20 PM
911pchelp
- Topic Starter
-
- Member
-
- 290 posts
Member
Thank you
Dont hv either but do hv photo shop pro 7 ... do you know if that will work?
Dont hv either but do hv photo shop pro 7 ... do you know if that will work?
#4
Posted 03 May 2006 - 03:20 PM
911pchelp
- Topic Starter
-
- Member
-
- 290 posts
Member
oops meant piant shop pro 7
#5
Posted 03 May 2006 - 06:30 PM
Dragon
-
- Retired Staff
-
- 2,682 posts
All Around Computer Nut
you would be able to accomplish the same thing with psp7.
the only problem will be that you won't have the availability, like Fireworks has, to make small slices of the image so it loads faster.
if you do use psp7, then make sure you save it in a compressed format such as .GIF or JPG.
the only problem will be that you won't have the availability, like Fireworks has, to make small slices of the image so it loads faster.
if you do use psp7, then make sure you save it in a compressed format such as .GIF or JPG.
#6
Posted 03 May 2006 - 08:04 PM
Major Payne
-
- Retired Staff
-
- 5,307 posts
Retired Staff
Play with this and see if it does what you want:
<script type="text/javascript">
<!--
/*Background fade by Dave Methvin,
Windows Magazine
May be used/modified if credit line is
retained*/
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
document.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
BgFade(0x00,0x00,0x00, 0xFF,0xFF,0xFF,10);
//-->
</script>
Simply cut and paste the script into the <HEAD> section of your webpage. Increase the speed of the fading by changing 50 to a lesser positive number (ie: 20). Change the fade-from and fade-to color by entering new hex values for the two colors, the (00,00,00) being the fade-from color, the others being the fade-to color.
Ron
<script type="text/javascript">
<!--
/*Background fade by Dave Methvin,
Windows Magazine
May be used/modified if credit line is
retained*/
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
document.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
BgFade(0x00,0x00,0x00, 0xFF,0xFF,0xFF,10);
//-->
</script>
Simply cut and paste the script into the <HEAD> section of your webpage. Increase the speed of the fading by changing 50 to a lesser positive number (ie: 20). Change the fade-from and fade-to color by entering new hex values for the two colors, the (00,00,00) being the fade-from color, the others being the fade-to color.
Ron
#7
Posted 04 May 2006 - 02:15 AM
TaNkZ101
-
- Member
-
- 327 posts
Member
I made my header with fireworks, hwo would i make it so it loads the fastest possible? save as gif? or how do i save with these layers?
#8
Posted 04 May 2006 - 06:50 AM
Dragon
-
- Retired Staff
-
- 2,682 posts
All Around Computer Nut
hiya tankz,
First off you should have started a seperate topic for your questions as it sends the original off-topic.
as for your question, make it a gif, png, or jpg when you save it, it compresses the file based on the format you make.
merging the layers will make it smaller and load faster. It would be a good idea to save a copy of the image without merging the layers too, that way you can edit it later if you want to.
First off you should have started a seperate topic for your questions as it sends the original off-topic.
as for your question, make it a gif, png, or jpg when you save it, it compresses the file based on the format you make.
merging the layers will make it smaller and load faster. It would be a good idea to save a copy of the image without merging the layers too, that way you can edit it later if you want to.
#9
Posted 18 May 2006 - 08:31 AM
knexor2
-
- Member
-
- 28 posts
Member
Is it possible to have a background that 'fades' across the page (i.e. starts as light green on left side and changes - gradually - to very dark green on right side)?
If possible, do I need special software? (Don't see how it can be done with 'straight' HTML.)
I think this could possibly be done with HTML and CSS, but the method would hardly be supported. It would require the use of the CSS "filter:alph", which I think "filter" is IE-only (my FireFox's JavaScript console marks it as an unknown property) and spotty even there, and the CSS "position:fixed", which I haven't been able to get to work anywhere (haven't tried in a while, though).
Your best bet is to make a 1px-high image that fades as you wanted, and use the following code snippet:
<style type="text/css">
body {
background-color:#00ff00;
background-image:url(bgpic.wev);
background-repeat:repeat-y;
background-position:right;
}
</style>
This would make the majority of the screen lime-green.
To make the majority of the screen dark green, change color to "#008000" and position to "left"
Hope this helps.
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
As Featured On:
Sign In
Create Account
