1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 Gradient Correct Application

Use CSS3 gradients correctly, without restricting yourself to defined colours.

  1. Anthony Parsons

    Anthony Parsons Well-Known Member

    Anthony Parsons submitted a new resource:

    CSS3 Gradient Correct Application (version 1.0) - Use CSS3 gradients correctly, without restricting yourself to defined colours.

    Read more about this resource...
     
    8thos likes this.
  2. Anthony Parsons

    Anthony Parsons Well-Known Member

    And just to prove the point the second image is CSS3, the attachment here shows what is being used:

    Screen Shot 2012-04-22 at 11.45.53 AM.png

    The computed style would only be the appropriate one for your actual browser:

    Screen Shot 2012-04-22 at 11.47.47 AM.png
     
    Shelley likes this.
  3. Shelley

    Shelley Well-Known Member

    I've been experimenting with css3 gradients on tests styles and they're great to use in some areas but as with everything there are draw backs (design relelated) that css3 gradients just cannot accomplish like mult-layered effects that graphic editors do best. Anyway not getting into that, I've experimented in the past with it and the gradients do look great, so good guide Anthony. In many areas of xenforo this guide will be helpful for others but many other areas I'll still stick with gradient images because the gradients I design are not your linear/radial effects example: Like the carbon fibre effect and other more complex gradient designs.

    Another example of css3 gradients in use from an old style as this is a good starting guide and felt it's worth promoting and encouraging. Good guide Anthony nice job.

    css3-gradients.png
     
    Anthony Parsons likes this.
  4. Anthony Parsons

    Anthony Parsons Well-Known Member

    Thanks Shelley. Yer... nothing beats some good old grain / textured gradients in places IMHO.

    I like the above use in your pic.

    I guess the other way to improve gradient loading is to put all the horizontal gradients into a vertical sprite and all the vertical gradients into a horizontal sprite. Kind off screwed though I guess for outright "repeat" patterns. Saying that, you need to have the widths and heights exactly matching the gradient size... back to kind of painful.

    I do certainly agree though, CSS gradients have a time and place. I find them excellent for linear usage over images as they automatically suit the width or height.
     
    Shelley likes this.
  5. Shelley

    Shelley Well-Known Member

    I think there are so many factors to consider with gradients whether their css3 based, gradients on spritesheets, basic linear gradients standalone images etc and so forth. Each site will be different, one may use complex gradients that can't use CSS3, some will make use of the simple linear kind and may go the route of using spritesheets with lowering http requests pulling the images (gradients). I think at the end of the day it's really all about compromise, do I want to lower the amount of http requests? how can i do this? I can certainly do this on 40% of the gradients I'm using since they are using the white >>> transparent so height isn't going to pose an issue (atleast I don't think it will) Can my carbon fibre gradient go on a spritesheet? yeah that can be thrown in also it only needs to repeat-x since the height is fixed. Though I won't be able to go down the css3 route with the carbon gradient. Point being, your going to compromise no matter which way you look at it and you just have to tackle it to your style needs and make the best of it.

    And your right, there is a time and place to use gradients. And the technical reasons in keeping to standards should be encouraged but I also think we should never lose the character of our styles if it calls for the image to add an extra http request and/or the kb is a little bit higher than usual.

    Good thread Anthony, it's definitely gave me something to think about and re-evaluate the way my gradients are structured and I'll be making some optimizations to it all when time permits on my style. (y)

    Ps. You've just increased my workload significantly. :LOL:
     
    Anthony Parsons likes this.
  6. Andy.N

    Andy.N Well-Known Member

    Anthony,
    How have you done with replacing Flexile gradient png with CSS3? I'm using that style and interested in applying CSS3 for it.
     
  7. Anthony Parsons

    Anthony Parsons Well-Known Member

    I have completely changed all gradients out to CSS3 in Flexile with huge success. Members immediately noticed a performance improvement.
     
    Shelley and Andy.N like this.
  8. Andy.N

    Andy.N Well-Known Member

    Can you please tell us which location to change and how to do it?
     
  9. Anthony Parsons

    Anthony Parsons Well-Known Member

    Andy.N likes this.
  10. Andy.N

    Andy.N Well-Known Member

    Anthony,
    That's a great one. I import and overwrite the default Flexile style and it REALLY cuts down on the number of requests. That's huge improvement.

    I hope Erik will use that base xml for his next release.

    I notice that there is still category-bar-gradient.png images that I couldn't find which one it comes from.
     
    Anthony Parsons likes this.
  11. DRE

    DRE Well-Known Member

    Looks difficult.
     
  12. DRE

    DRE Well-Known Member

    I've been thinking about updating most of my current themes to 1.1.3 . Probably won't, but just a thought. One thing that interests me is this:

    Can you show me an example of some statistics of what you mean etc?
     
  13. Andy.N

    Andy.N Well-Known Member

    After applying all the css3 gradients and other fixes, my forum has cut about 20 http requests. It's now loaded in about 1.8-2 seconds. Pagespeed score improved from 82 to 92
     
    8thos likes this.
  14. DRE

    DRE Well-Known Member

    Sounds really interesting now.
     
  15. Anthony Parsons

    Anthony Parsons Well-Known Member

    And you don't colour the gradients with your style colour either, you create a CSS3 gradient to mimic the default XF gradient / style gradient being used, thus your themes colours are still controlled via the style colour and not making it difficult for a person to go through and have to recolour gradients themselves.

    This also makes it simple for backwards compatibility, as you leave all the default gradients in place, that way those using older browsers not capable of gradients will still get the exact same look... just via an image.
     
  16. DRE

    DRE Well-Known Member

    So you put this in extra.css?
     
  17. Anthony Parsons

    Anthony Parsons Well-Known Member

  18. Andy.N

    Andy.N Well-Known Member

    I did it this way (in style properties, extra css box at the bottom) and then I see you put them in the .css files of Flexile. I then import and overwrite my Flexile. My main theme is a child of it so it inherits all the properties.

    I guess I can safely remove all the css i made in style properties now.

    Btw, have you seen this? http://xenforo.com/community/thread...ment-mucking-css3-gradient-definitions.33341/
     
    Anthony Parsons likes this.
  19. DRE

    DRE Well-Known Member

    wtf...

    Too much work. That's something I would only try figuring out how to do if I had alot of time on my hands.
     
  20. Anthony Parsons

    Anthony Parsons Well-Known Member

    If you put them into the extra css box in style properties, you will absolutely corrupt the background, as the style properties only allows one background, it confuses additional properties.

    You are best to hard code gradients into the stylesheet directly, outside of the @property.

    It's actually really simple, because you only create the default gradients you use already, then you copy and paste them into each class that requires them, adding only the style colour property to the beginning that enables colour changes to then be made via the colour style properties.

    It takes a couple of hours to do initially, then its all easy sailing from that point forward with further style changes.
     
    Shelley likes this.

Share This Page