CSS Gradients

HTML & CSS
1

Hello,

I am trying to set a gradient background for a site and have the following written:

background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.25, rgb(48,48,48)),
			color-stop(1, rgb(135,135,135))
			);
background: -moz-linear-gradient(
			center top,
			rgb(48,48,48) 25%,
			rgb(135,135,135) 100%
			);
background: -o-linear-gradient(
			center top,
			rgb(48,48,48) 25%,
			rgb(135,135,135) 100%
			);

Now, the background works perfectly in webkit browsers and also in Firefox but I just get the fallback fuchsia temporary colour in Opera. I am using Opera 11.10 beta which DOES support CSS gradients. Any ideas why this is not showing up correctly in Opera?

Also,

How would I go about making the same gradient in SVG for use in IE?

Thanks

Neil

2

Remove the “center top” from the rule and it will work in Opera 11 beta. It doesn’t have full support yet.


background: -o-linear-gradient(
            rgb(48,48,48) 25%,
            rgb(135,135,135) 100%
            );

Remember to also include the non vendor specific version as the final property.

Also,

How would I go about making the same gradient in SVG for use in IE?

Thanks

Neil

I’m not into SVG but you could do it with one of the old MS filters if you really had to.

3

Also, how do you know what the proper non vendor specific version is as the vendors seem to use different syntaxes for this property.

4

You would need to refer to the specs for the complete details but there are [URL=“http://www.google.com/#hl=en&sugexp=ldymls&pq=cross%20browser%20css3%20generatora&xhr=t&q=css3+generator&cp=1&pf=p&sclient=psy&aq=0&aqi=&aql=&oq=+css3+generator&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=158f5021afbf0802&bs=1”]plenty of [URL=“http://css3please.com/”]generators around that do all the hard work for you. I can’t remember any of these syntaxes at all - and I’m not even going to try :slight_smile:

5

From your link:

background-image: linear-gradient(top, #444444, #999999);

http://dev.w3.org/csswg/css3-images/#gradients

This is the coolest CSS gradient generator I’ve found:

CSS3 Gradient Generator

Another:

6

That first gradient generator was the exact one I used and then changed the moz prefix to the opera one which is when i noticed it didn’t work

7

Gecko use a non standard syntax using “center” which is not in the specs I believe which is why opera would not work if you used it.
[URL=“http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients”]
Specs
Operas version
Gecko
webkit

8

Just for my information:

Could you just explain how I should read this syntax specification:

<linear-gradient> = linear-gradient(
[
[ [top | bottom] || [left | right] ]
|
<angle>
,]?
<color-stop>[, <color-stop>]+
);

Thanks

9

Hi,

That’s a loaded question as it needs to follow these rules:

From the specs:

Component values may be arranged into property values as follows:

  • Several juxtaposed words mean that all of them must occur, in the given order.
  • A bar (|) separates two or more alternatives: exactly one of them must occur.
  • A double bar (||) separates two or more options: one or more of them must occur, in any order.
  • A double ampersand (&&) separates two or more components, all of which must occur, in any order.
  • Brackets () are for grouping.

Juxtaposition is stronger than the double ampersand, the double ampersand is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent:
a b | c || d && e f
[ a b ] | [ c || [ d && [ e f ]]]
Every type, keyword, or bracketed group may be followed by one of the following modifiers:

  • An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
  • A plus (+) indicates that the preceding type, word, or group occurs one or more times.
  • A question mark (?) indicates that the preceding type, word, or group is optional.
  • A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word, or group occurs at least A and at most B times.

Which I take to mean:

[
[ [top | bottom] || [left | right] ]
|
<angle>
,]?

The question mark means that the previous bracketed section is optional. If used then you can use (top or bottom) and/or (left or right) (eg. “top left”) or instead of all that use an angle (e.g. 45deg).

<color-stop>[, <color-stop>]+
);

The plus at the end says that the preceding bracketed section must appear once or more times. Basically meaning that you have two or more values.(e.g. blue, yellow).

Probably best to read up on it in full as I always have to look it up.

How to read the specs
Reading the specs.

10

Thanks Paul, I’ll make sure to save a copy of those so I can find them again quickly