Webkit gradient doesn't work

Question

Webkit gradient doesn't work

hello I have this in a page:

{quote:title=CSS}{quote}
-webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#6375D6));

and it doesn't work....
I really have no Idea what's wrong
I have the safari 4 ^Beta^ so it should work

none it's actually just a motherboard... almost everything is build in!, Windows XP Pro, ReactOS is also installed, but used rarely as it's still alpha...

Posted on Apr 18, 2009 1:41 PM

Reply

Answer 1

iBod

Level 7

29,351 points

Apr 18, 2009 2:08 PM in response to foxofinfinety

Hi,

What's the page in question?
If you can't link to the site, can you post a test case page over at http://pastebin.com

Reply

Answer 2

Apr 19, 2009 8:06 AM in response to iBod

actually it's a CSS class
putting it on pastebin isn't going to make a difference I think,
as the complete CSS class only has this and a height and width and
the page only the required tags (html, head, body) and a div

Reply

Answer 3

iBod

Level 7

29,351 points

Apr 19, 2009 9:01 AM in response to foxofinfinety

Ok, your decision, but it's pretty tricky to debug someones code without seeing the actual code.

The CSS gradient examples I've seen over on the webkit website work fine in Safari 4 on Windows for me, so I can only assume it's your code that is the issue.

Reply

Answer 4

Apr 19, 2009 11:04 AM in response to iBod

I mean there is not much more code
I've put it there but I don't think it will help:
[PHP/XHTML|http://pastebin.com/m75fc13a9] [CSS|http://pastebin.com/d7bca171f]

Reply

Answer 5

iBod

Level 7

29,351 points

Apr 19, 2009 11:30 AM in response to foxofinfinety

It did help 🙂

You have the definition in the CSS file set incorrectly.

-web-gradient is not a CSS property, but rather a value a property can have.

In your example, try adding background before the gradient definition in the CategoryTitle class.
E.g.


background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#6375D6));

Reply

Answer 6

Apr 19, 2009 12:31 PM in response to iBod

woops...

but I also need to use a gradient on a HR
to make the it change collor from left to right, and also the opacity
has to change from 1.0 to 0.0
I really don't know how to do that
I have this:

background: -webkit-gradient(linear, left top, right bottom, from(opacity:1.0), to(opacity:0.0));

but that doesn't work (I assumed that in the first place, but doesn't hurt to try)

Reply

Answer 7

iBod

Level 7

29,351 points

Apr 19, 2009 1:18 PM in response to foxofinfinety

Try something like this instead:


background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255,0,0,1.0)), to(rgba(255,0,0,0.0)));

Reply