Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Fading colours with CSS

Reply
Thread Tools

Fading colours with CSS

 
 
bjg
Guest
Posts: n/a
 
      12-10-2003
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
 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      12-10-2003
in post <news:(E-Mail Removed)>
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
 
Reply With Quote
 
 
 
 
bjg
Guest
Posts: n/a
 
      12-10-2003
brucie wrote:

> in post <news:(E-Mail Removed)>
> 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?

 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      12-10-2003
in post <news:(E-Mail Removed)>
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.in...ed-thingy.html



--
brucie
10/December/2003 06:00:25 pm kilo
 
Reply With Quote
 
OllimaX
Guest
Posts: n/a
 
      12-10-2003
brucie <(E-Mail Removed)> 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/
 
Reply With Quote
 
Steve R.
Guest
Posts: n/a
 
      12-10-2003
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="filterrogidXImageTransform.Microsoft.Gr adient(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="filterrogidXImageTransform.Microsoft.Gr adient(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.


 
Reply With Quote
 
bjg
Guest
Posts: n/a
 
      12-10-2003
brucie wrote:

> in post <news:(E-Mail Removed)>
> 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.in...ed-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

 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      12-10-2003
in post <news:(E-Mail Removed)>
bjg said:

>> needs a modern browser because i couldn't be stuffed writing all the
>> classes (or IDs)
>> http://moreshit.bruciesusenetshit.in...ed-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
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-10-2003

"brucie" <(E-Mail Removed)> wrote in message
news:br6jt4$29j513$(E-Mail Removed)-berlin.de...
> in post <news:(E-Mail Removed)>
> 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.in...ed-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/...ed-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.


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      12-10-2003
in post <news:cqFBb.47563$(E-Mail Removed)>
rf said:

>> http://moreshit.bruciesusenetshit.in...ed-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/...ed-thingy.html


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

--
brucie
11/December/2003 12:01:42 am kilo
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
printer colours vs 'real' colours dido22 Digital Photography 4 06-15-2007 03:37 PM
CSS styles and item colours Paul Cheetham ASP .Net Datagrid Control 3 02-22-2006 06:18 PM
Fading away button click on tree node... Michael Java 1 12-23-2003 07:43 AM
CSS web safe colours Keith HTML 6 10-27-2003 09:10 AM
Fading Frame Contents az bij HTML 6 10-22-2003 11:17 PM



Advertisments