Fading colours with CSS

Discussion in 'HTML' started by bjg, Dec 10, 2003.

  1. bjg

    bjg Guest

    Hey,

    I want to fade white into a light green, like a gradient. Is this possible
    with CSS? If not, is the only way to do it with an image?

    BJG
     
    bjg, Dec 10, 2003
    #1
    1. Advertisements

  2. bjg

    brucie Guest

    lots of spans with slightly different colors
    JS
     
    brucie, Dec 10, 2003
    #2
    1. Advertisements

  3. bjg

    bjg Guest

    Know of any examples of this?
     
    bjg, Dec 10, 2003
    #3
  4. bjg

    brucie Guest

    brucie, Dec 10, 2003
    #4
  5. bjg

    OllimaX Guest

    brucie <> kirjoitti Wed, 10 Dec 2003
    18:01:22 +1000:


    I think the source is more beautiful :)
    Oll¡maX!
     
    OllimaX, Dec 10, 2003
    #5
  6. bjg

    Steve R. Guest

    bjg wrote in message ...
    I don't know whether this will be any help, but it seemed to work when I
    tried it a while back.

    The code was supplied by www.bravenet.com in one of their regular customer
    newsletters, as below ...

    lets us know if it works for you :~)

    Steve.

    -----------------------------------------------------------------

    How to Make a Gradient Background

    Gradients are colors that blend into each other to form an ongoing color
    shift. This effect is highly appealing, and used generally in graphic design,
    rather than with Web pages. However, a simple style appended to your page's
    Body Tag can create a very nice gradient fill to form a background to the
    page.

    This style can be applied to your entire page by using it within the Body
    Tag, or you can choose to add fills to tables by employing the same code with
    your Table Tags.

    Consider the following code for use in your body tag to add a gradient to the
    whole page:

    <body
    style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ccffcc
    ', startColorstr='#FFFFFF', gradientType='0');"></body>

    Now transport this to an HTML table (note how we reversed the color order for
    the table):

    <table
    style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff
    ', startColorstr='#ccffcc',
    gradientType='0');"><tr><td>adfad<br><br></td></tr></table>

    Remember, the gradient runs from one color to the other, so you want to have
    highly contrasting colors for your two input values to take advantage of the
    full effect. Also note the gradientType, which is specified in our example as
    "0". This produces a vertical blend. If we set this value to "1" we get a
    horizontal gradation.
     
    Steve R., Dec 10, 2003
    #6
  7. bjg

    bjg Guest

    Cool, thanks. But how would i make say a background fade if i don't have any
    text? This leads me onto another question - what's the best way to make
    like blocks of colour and patterns etc when i don't have any text?

    BJG
     
    bjg, Dec 10, 2003
    #7
  8. bjg

    brucie Guest

    use a background image
    for solid colors use CSS or 1x1px images sized up to your requirements
    (but css is better) for patterns just use the image.
     
    brucie, Dec 10, 2003
    #8
  9. bjg

    rf Guest

    <span> soup brucie?

    There are more <span>s in there than you can poke a stick at :)

    Nice though.

    But for those who use modernly challenged browsers like IE, well then:

    http://users.bigpond.net.au/rf/test/blue-to-red-thingy.html

    Of course I have not closed any of the <span>s, because I couldn't be
    bothered typing the bloody things in. The browsers error recovery will
    insert them anyway on finding a </p> :) The student may count/copy/paste
    the </span>s as an exercise.

    Cheers
    Richard.
     
    rf, Dec 10, 2003
    #9
  10. bjg

    brucie Guest

    LOL, it is just a bit but it was much faster copy/pasting spans than
    doing class thingys.
    obviously not or my point stick editor wouldn't have been able to do it
    it caused my opera 7.23 to crash after almost hanging the system.
     
    brucie, Dec 10, 2003
    #10
  11. bjg

    Wipkip Guest

    Wipkip, Dec 10, 2003
    #11
  12. bjg

    Mark Parnell Guest

    Mark Parnell, Dec 10, 2003
    #12
  13. bjg

    Mark Parnell Guest

    Sometime around Wed, 10 Dec 2003 09:45:54 GMT, Steve R.NOSPAM is reported
    to have stated:
    <snip MS proprietary crap>

    Only if you use an ancient browser-like OS component.
     
    Mark Parnell, Dec 10, 2003
    #13
  14. bjg

    rf Guest

    I suspected it would. Opera must have some very fragile code in its (X)HTML
    parser if simply leaving out a few dozen </span> tags causes it to break.
    Wonder what happens when it comes across a *real* error? :)

    Cheers
    Richard.
     
    rf, Dec 10, 2003
    #14
  15. Well, for a true *X*HTML parser, leaving out closing tags *should* cause
    an error -- this is *desired* behaviour.
     
    Toby A Inkster, Dec 11, 2003
    #15
  16. No, it doesn't work in Nautilus 1.x
     
    Toby A Inkster, Dec 11, 2003
    #16
  17. bjg

    rf Guest

    Error yes. Not complete program crash !

    Cheers
    Richard.
     
    rf, Dec 11, 2003
    #17
  18. Or Konqueror, though neither are really OS components. How is Nauilus
    browser-like, anyway? It doesn't have any HTML rendering, IIRC.
     
    Leif K-Brooks, Dec 12, 2003
    #18
  19. Well, it depends on where you draw the line between the OS and application
    spaces. The kernel is certainly part of the OS, as are kernel modules.
    What about X11? It is more or less equivalent to the keyboard, mouse and
    screen drivers included with most other operating systems, so is arguably
    part of the OS. What about the window manager? Graphical file browser?
    These also perform functions that are completely integrated into the OS
    in many non-X11 systems (Windows, Mac), so are they part of the OS?

    It's a blurry line.
    Nautilus has some browsing capabilities, although it's not great.

    http://www.goddamn.co.uk/tobyink/scratch/nautilus

    Nautilus 1.x used Gecko as its rendering engine. Nautilus 2.x uses GtkHTML.
     
    Toby A Inkster, Dec 12, 2003
    #19
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.