Fading colours with CSS


B

bjg

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
 
Ad

Advertisements

S

Steve R.

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

Advertisements

B

brucie

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

rf

brucie 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

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

brucie

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

Advertisements

M

Mark Parnell

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

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

rf

Mark Parnell said:
Sometime around Thu, 11 Dec 2003 00:05:24 +1000, brucie is reported to have

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

Toby A Inkster

rf said:
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.
 
T

Toby A Inkster

Mark said:
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.

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

Advertisements

R

rf

Toby A Inkster said:
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.
 
L

Leif K-Brooks

Toby said:
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.
 
Ad

Advertisements

T

Toby A Inkster

Leif said:
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.
 
Ad

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

blurry edge backgrounds by css 7
CSS Image swap not working. 1
HTML Aligning social media icons 2
Help please! :( 3
Fading an image 6
Pink effect hovering image 1
Trouble with css 4
less or sass and colour schemes 7

Top