• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11333
  • Last Modified:

background Color degraded in HTML using CSS

I'm changin the design of my web-application & found that there's an effect of Color degradation but the way I'm using it is affecting the entire site

this is what I'm using:
filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);

I apply this as a CSS in the body (that's the way I wanted it) & then placed divs where I show the information or the capture forms but the degradation affects text, images & everything, is there a way to use a degradation effect without images?
thanx in advance

READ YA
m1k3
0
m1k3
Asked:
m1k3
  • 4
  • 3
  • 3
2 Solutions
 
jasonsbytesCommented:
Of course this would indeed affect everything, but only in IE.  This affect is ignored by FF and all other browsers.

When you apply a css style to the body tag, it also applies to all tags within the body (so that's everything).

The best way and recommended way to do this is with an image.

You can do this with a very tiny 1 pixel wide image and however tall you need it to be.

Look at this page and scroll down to the background gradient section:
http://www.tizag.com/cssT/background.php

Obviously you'll want to create your own image to meet your color and whatever else needs.

Also, this is referred to as a:  gradient.
0
 
m1k3Author Commented:
I know about the 1px image, I dont really want 2 use it, that's why I'm asking if there's another option... & wrote "is there a way to use a degradation effect without images?"

I've checked in the MSN site & stripped the style sheet that they use... also dreamweaver has this effect on its templates, here's the CSS-file
 http://stc.msn.com/br/hp/en-us/css/31/blu.css
this is the image http://stc.msn.com/br/hp/en-us/css/31/decoration/bg_b.gif
I was just hoppin' to make the effect only in the background-color & to leave every div or object intact
0
 
jasonsbytesCommented:
Yes, there are other ways, but not consistent ones nor good ones.

There is no one standard that works in all browsers.

The best way and recommended way and safe way and probably the smart way is to use the image.

Why do you not want to use the image?  It is the best way.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
m1k3Author Commented:
I know it's the best way, fastest & works in every browser just want 2 make it using CSS

READ YA
m1k3
0
 
jasonsbytesCommented:
Ya, I can understand that... I think everybody wishes it was possible to do it in pure css as well.

unfortunatly, there is no way to do it in css without employing a ton of hacks where it will work with all browsers and work well.

And there's no way to do it in css where it will be standards complient... It's just a bad idea right now... I'm confident that soon, this will be fixed and there will be a css solution, but not today... :|

i say bite the bullet and be safe, it's just a bg, nobody will even care if it's a gradient or not anyways.
0
 
LeeKowalkowskiCommented:
Just put position:relative on anything you don't want the filter to be applied to.

You might even be able to do:
  body *{position:relative}

--
Lee

0
 
m1k3Author Commented:

The position: relative; does not work... I've all my divs already with the position: relative but it's not working, thanx 4 the tip

read ya
 m1k3
0
 
LeeKowalkowskiCommented:
I find it works when you are in Standards Mode (e.g. you have a valid DOCTYPE), and your BODY element *isn't* positioned out of the flow (I'm not sure why one would need their BODY element to be positioned).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style>
      body
      {
        filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
      }
      div
      {
        position:relative;
      }
    </style>
  </head>
  <body>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <div>
      <p>Hello</p>
    </div>
    <p>Hello</p>
    <p>Hello</p>
  </body>
</html>

Perhaps your CSS is more complicated.  You'll need to post a test page if so.

--
Lee
0
 
m1k3Author Commented:
hi, I've been so busy 'til now, here's my code

<script language="JavaScript">
   function set_color (color)
   {
    var body = document.getElementsByTagName("body")[0];
      switch (color)
      {
       case "blue":
        body.style.background = "#66F";
     break;
       case "green":
        body.style.background = "#6F6";
       break;
        case "red":
          body.style.background = "#F66";
       break;
      }
   }
</script>

<style type="text/css">
   body
   {
    background: #ffffff;
      color: #000000;
    width:100%;
    height:100%;
    filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
      background-position: center top;
   }
   div
   {
    position: relative;
   }
   div.clock
   {
    position: relative;
      top:90%;
      left: 0%;
      font-size:8pt;
      text-color:#000;
      color:#000;
      font-family:Arial;
      font-weight:bold;
   }
   body.blue { background:#66F; }
   body.green { background:#6F6; }
   body.red { background:#F66; }
   .blue h1 { color: #00F; }
   .green h1 { color: #0F0; }
   .red h1 { color: #F00; }
   #base
   {
    position: absolute;
      border: 1px solid #000;
      width:20px;
      height:12px;
   }
  </style>

<body onload="mueveReloj()">
  <div style="position: absolute; width:73px; height:22px; top:15px; left:90%;">
   <div id="base" style="background: #0000FF; top: 0px; left: 0px;" onMouseOver="style.cursor='hand';" onClick="set_color('blue');"> &nbsp; </div>
   <div id="base" style="background: #00FF00; top: 0px; left: 21px;" onMouseOver="style.cursor='hand';" onClick="set_color('green');"> &nbsp; </div>
   <div id="base" style="background: #FF0000; top: 0px; left: 42px;" onMouseOver="style.cursor='hand';" onClick="set_color('red');"> &nbsp; </div>
  </div>
  <div>
   <br><br><br><br><br><br><br><br><br><br><br><br>
   <h1>MIKE</h1>
   <div id="capareloj" class="clock"></div>
  </div>
 </body>

NOTE: My IE is ver. 6


READ YA
m1k3
0
 
LeeKowalkowskiCommented:
Two small changes. DOCTYPE, and position:relative on the 'content' div:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script language="JavaScript">
   function set_color (color)
   {
    var body = document.getElementsByTagName("body")[0];
      switch (color)
      {
       case "blue":
        body.style.background = "#66F";
     break;
       case "green":
        body.style.background = "#6F6";
       break;
        case "red":
          body.style.background = "#F66";
       break;
      }
   }
</script>

<style type="text/css">
   body
   {
    background: #ffffff;
      color: #000000;
    width:100%;
    height:100%;
    filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
      background-position: center top;
   }
   div
   {
    position: relative;
   }
   div.clock
   {
    position: relative;
      top:90%;
      left: 0%;
      font-size:8pt;
      text-color:#000;
      color:#000;
      font-family:Arial;
      font-weight:bold;
   }
   body.blue { background:#66F; }
   body.green { background:#6F6; }
   body.red { background:#F66; }
   .blue h1 { color: #00F; }
   .green h1 { color: #0F0; }
   .red h1 { color: #F00; }
   #base
   {
    position: absolute;
      border: 1px solid #000;
      width:20px;
      height:12px;
   }
  </style>

<body onload="">
  <div style="position: absolute; width:73px; height:22px; top:15px; left:90%;">
   <div id="base" style="background: #0000FF; top: 0px; left: 0px;" onMouseOver="style.cursor='hand';" onClick="set_color('blue');"> &nbsp; </div>
   <div id="base" style="background: #00FF00; top: 0px; left: 21px;" onMouseOver="style.cursor='hand';" onClick="set_color('green');"> &nbsp; </div>
   <div id="base" style="background: #FF0000; top: 0px; left: 42px;" onMouseOver="style.cursor='hand';" onClick="set_color('red');"> &nbsp; </div>
  </div>
  <div style="position:relative;">
   <br><br><br><br><br><br><br><br><br><br><br><br>
   <h1>MIKE</h1>
   <div id="capareloj" class="clock"></div>
  </div>
 </body>

Works on my IE6.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now