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. Advertising

  2. bjg

    brucie Guest

    in post <news:>
    bjg said:

    > I want to fade white into a light green, like a gradient. Is this possible
    > with CSS?


    lots of spans with slightly different colors

    > If not, is the only way to do it with an image?


    JS

    --
    brucie
    10/December/2003 04:50:01 pm kilo
    brucie, Dec 10, 2003
    #2
    1. Advertising

  3. bjg

    bjg Guest

    brucie wrote:

    > in post <news:>
    > bjg said:
    >
    >> I want to fade white into a light green, like a gradient. Is this
    >> possible with CSS?

    >
    > lots of spans with slightly different colors


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

    brucie Guest

    in post <news:>
    bjg said:

    >>> I want to fade white into a light green, like a gradient. Is this
    >>> possible with CSS?


    >> lots of spans with slightly different colors


    > Know of any examples of this?


    needs a modern browser because i couldn't be stuffed writing all the
    classes (or IDs)
    http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html



    --
    brucie
    10/December/2003 06:00:25 pm kilo
    brucie, Dec 10, 2003
    #4
  5. bjg

    OllimaX Guest

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


    > needs a modern browser because i couldn't be stuffed writing all the
    > classes (or IDs)



    I think the source is more beautiful :)
    Oll¡maX!
    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
    OllimaX, Dec 10, 2003
    #5
  6. bjg

    Steve R. Guest

    bjg wrote in message ...
    > I want to fade white into a light green, like a gradient.


    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

    brucie wrote:

    > in post <news:>
    > bjg said:
    >
    >>>> I want to fade white into a light green, like a gradient. Is this
    >>>> possible with CSS?

    >
    >>> lots of spans with slightly different colors

    >
    >> Know of any examples of this?

    >
    > needs a modern browser because i couldn't be stuffed writing all the
    > classes (or IDs)
    > http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html


    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

    in post <news:>
    bjg said:

    >> needs a modern browser because i couldn't be stuffed writing all the
    >> classes (or IDs)
    >> http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html


    > Cool, thanks. But how would i make say a background fade if i don't have any
    > text?


    use a background image

    > 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?


    for solid colors use CSS or 1x1px images sized up to your requirements
    (but css is better) for patterns just use the image.

    --
    brucie
    10/December/2003 07:52:37 pm kilo
    brucie, Dec 10, 2003
    #8
  9. bjg

    rf Guest

    "brucie" <> wrote in message
    news:br6jt4$29j513$-berlin.de...
    > in post <news:>
    > bjg said:
    >
    > >>> I want to fade white into a light green, like a gradient. Is this
    > >>> possible with CSS?

    >
    > >> lots of spans with slightly different colors

    >
    > > Know of any examples of this?

    >
    > needs a modern browser because i couldn't be stuffed writing all the
    > classes (or IDs)
    > http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html


    <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

    in post <news:cqFBb.47563$>
    rf said:

    >> http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html


    > <span> soup brucie?


    LOL, it is just a bit but it was much faster copy/pasting spans than
    doing class thingys.

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


    obviously not or my point stick editor wouldn't have been able to do it

    > 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


    it caused my opera 7.23 to crash after almost hanging the system.

    --
    brucie
    11/December/2003 12:01:42 am kilo
    brucie, Dec 10, 2003
    #10
  11. bjg

    Wipkip Guest

    While sitting in a puddle brucie scribbled in the mud:

    > in post <news:>
    > bjg said:
    >
    >>>> I want to fade white into a light green, like a gradient. Is this
    >>>> possible with CSS?

    >
    >>> lots of spans with slightly different colors

    >
    >> Know of any examples of this?

    >
    > needs a modern browser because i couldn't be stuffed writing all the
    > classes (or IDs)
    > http://moreshit.bruciesusenetshit.info/blue-to-red-thingy.html
    >
    >

    Works in NN 7 & Opera 7 but not IE. CSS looks cool

    --
    Duende
    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:

    > bjg wrote in message ...
    >> I want to fade white into a light green, like a gradient.

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

    <snip MS proprietary crap>

    Only if you use an ancient browser-like OS component.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Dec 10, 2003
    #13
  14. bjg

    rf Guest

    "Mark Parnell" <> wrote in message
    news:...
    > Sometime around Thu, 11 Dec 2003 00:05:24 +1000, brucie is reported to

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

    > >
    > > it caused my opera 7.23 to crash after almost hanging the system.

    >
    > Works here in Opera 7.21 if you close the <span>s. :)


    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. rf wrote:

    > 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.


    Well, for a true *X*HTML parser, leaving out closing tags *should* cause
    an error -- this is *desired* behaviour.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Dec 11, 2003
    #15
  16. Mark Parnell wrote:

    > Sometime around Wed, 10 Dec 2003 09:45:54 GMT, Steve R.NOSPAM is reported
    > to have stated:
    >
    >> bjg wrote in message ...
    >>> I want to fade white into a light green, like a gradient.

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

    > <snip MS proprietary crap>
    >
    > Only if you use an ancient browser-like OS component.


    No, it doesn't work in Nautilus 1.x

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Dec 11, 2003
    #16
  17. bjg

    rf Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > rf wrote:
    >
    > > 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.
    >
    > Well, for a true *X*HTML parser, leaving out closing tags *should* cause
    > an error -- this is *desired* behaviour.


    Error yes. Not complete program crash !

    Cheers
    Richard.
    rf, Dec 11, 2003
    #17
  18. Toby A Inkster wrote:
    >> Only if you use an ancient browser-like OS component.

    >
    > No, it doesn't work in Nautilus 1.x


    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. Leif K-Brooks wrote:

    > Toby A Inkster wrote:
    >>> Only if you use an ancient browser-like OS component.

    >>
    >> No, it doesn't work in Nautilus 1.x

    >
    > Or Konqueror, though neither are really OS components.


    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.

    > How is Nauilus browser-like, anyway? It doesn't have any HTML
    > rendering, IIRC.


    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 BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Dec 12, 2003
    #19
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael
    Replies:
    1
    Views:
    338
    Harald Hein
    Dec 23, 2003
  2. az bij

    Fading Frame Contents

    az bij, Oct 21, 2003, in forum: HTML
    Replies:
    6
    Views:
    903
    Mark Parnell
    Oct 23, 2003
  3. Keith

    CSS web safe colours

    Keith, Oct 26, 2003, in forum: HTML
    Replies:
    6
    Views:
    1,849
    Toby A Inkster
    Oct 27, 2003
  4. Frank McMahon
    Replies:
    3
    Views:
    7,781
    homer
    Jan 28, 2005
  5. Paul Cheetham

    CSS styles and item colours

    Paul Cheetham, Feb 21, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    216
    Elton Wang
    Feb 22, 2006
Loading...

Share This Page