SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS Gradients

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Gradients

    Hello,

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

    Code CSS:
    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rctneil View Post
    Hello,

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

    Code CSS:
    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?
    Remove the "center top" from the rule and it will work in Opera 11 beta. It doesn't have full support yet.

    Code:
    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. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You would need to refer to the specs for the complete details but there are plenty of 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

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,771
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You would need to refer to the specs for the complete details
    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:

    http://www.colorzilla.com/gradient-editor/

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    From your link:

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

    CSS Image Values and Replaced Content Module Level 3

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

    CSS3 Gradient Generator

    Another:

    Ultimate CSS Gradient Generator - ColorZilla.com

    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rctneil View Post
    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
    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.

    Specs

    Operas version
    Gecko
    webkit

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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. #10
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I'll make sure to save a copy of those so I can find them again quickly


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •