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

Basic CSS3 gradients support

Discussion in 'XenForo Suggestions' started by CyberAP, Jun 11, 2011.

  1. CyberAP

    CyberAP Well-Known Member

    Currently all popular browsers support linear gradients (their latest stable versions).
    • Chrome: -webkit-linear-gradient
    • Firefox: -mox-linear-gradient
    • Safari: -webkit-linear-gradient (nighty build, for <5.1 use -webkit-gradient(linear,...))
    • Opera: -o-linear-gradient
    • IE: filter(DXImageTransform) (or for 10: -ms-linear-gradient)
    Surprisingly XenForo doesn't support them. If you would like to include a gradient background into a style property you'll get into a big trouble like a huge mess after you save a template with gradients in property. It happens because we should use a background-image property for gradients which is already supported by XenForo but allows you to use only one instance of it in a property. So when you save a template all your previous background images are erased and there is only one.
    What I request is to include a basic support for gradients in XenForo. No need to create some new interface inside Style settings, just a property support.
    Thanks.

    Concept:
    concept.PNG
     
    otto, Alfa1, Adam Howard and 8 others like this.
  2. CyberAP

    CyberAP Well-Known Member

    Bump. No reply still.
     
  3. James

    James Well-Known Member

    Can't you add this in the additional CSS box under the style property group?
     
  4. Forsaken

    Forsaken Well-Known Member

    Browsers just started supporting the actual gradient declaration.

    It is also something most people will probably not use, and is easy enough to do with additional css property as James said.
     
    leonight likes this.
  5. CyberAP

    CyberAP Well-Known Member

    Yes I can. But then I'm unable to work with templates containing that property.
     
  6. CyberAP

    CyberAP Well-Known Member

    Updated first post with a quick concept.
     
  7. Kier

    Kier XenForo Developer Staff Member

    FWIW, the image gradients we use in XenForo can not be reproduced simply with CSS3. At this point it just doesn't seem worth the effort.
     
    Kim and Shelley like this.
  8. CyberAP

    CyberAP Well-Known Member

    I don't want to replace the default ones, I want to create my own gradients :)
     
    simbolo likes this.
  9. Forsaken

    Forsaken Well-Known Member

    Extra CSS field is perfect for it, you'd also have much more control :).
     
  10. CyberAP

    CyberAP Well-Known Member

    You should've seen what hack I've done to make this really work with templates. I include properties in extra css and these properties contain my gradients code. This works with most of the templates or property groups but for e.x. it doesn't work with breadcrumbs. I.e. when I save the template my code is messed.
     
  11. digitalpoint

    digitalpoint Well-Known Member

    I haven't gone digging *too* much, but I was planning on going it when I found your response re: CSS3 gradients.

    We've replaced all gradients on digitalpoint.com with CSS definitions (less image files to load is always a good thing). Even relatively complex gradients usually can be done.

    Forgive me (heh) that it's vBulletin, but as an example, the gradient from the selected navigation...

    [​IMG]

    Done with CSS (won't bore you with multiple browser definitions)...

    Code:
    background: #9DBAA8 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.9)), color-stop(0.04, rgba(255, 255, 255, 0)), color-stop(0.13 ,rgba(255, 255, 255, 0)), color-stop(0.131 ,rgba(255, 255, 255, 0.95)), color-stop(1, rgba(255, 255, 255, 0.4)))
    The navtab it sits on is also just CSS (a simpler gradient)...

    Code:
    background: #618872 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.35)), color-stop(0.4, rgba(255, 255, 255, 0.1)), color-stop(1, transparent)
    Converting gradients to CSS3 wouldn't be as big of a gain for XF as it was for vB (just a quick skim and I only see 3 unique gradient images being loaded for a page view... which for vB it was more like 8 or 9). The XF gradients seem about as basic as you can get, so I don't really see anything about them that makes it not possible.

    BTW - I wasn't trying to coerce you into doing it, I was more curious if there *is* something I don't see that would prevent me doing it myself.
     
    8thos, el canadiano and Darkimmortal like this.
  12. Kier

    Kier XenForo Developer Staff Member

    I'll take another look when I get a chance, but the main issue as I see it (and this may be due to a lack of understanding of the capabilities of CSS gradients) is that our gradients tend to change from Color-X to transparent over a specific number of pixels, rather than over the complete image, or over the complete body of the element being styled. I'm not sure that approach is actually possible with CSS gradients, but I'm happy to be educated.
     
    sami simo, Marcus, Kim and 1 other person like this.
  13. SheepCow

    SheepCow Well-Known Member

    FYI you can do any length in the CSS gradient definitions so pixels, percentage e.t.c. all work. Can also use different transparencies (using rgba(r,g,b,a))
     
  14. kkm323

    kkm323 Well-Known Member

    is good to see the developer learning from his community :)
     
    8thos and Kier like this.
  15. Floris

    Floris Guest

    Kier, I think you can.

    You can define in css3 quite a few layers of gradients and define the (from) top/bottom.

    Screen shot 2011-09-18 at 8.32.10 PM.png

    Code:
    background: #32871b; /* Old browsers */
    background: -moz-linear-gradient(top, #32871b 0%, #2989d8 8%, #aa205a 19%, #2989d8 29%, #c6c625 30%, #2989d8 70%, #9b9493 79%, #207cca 90%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#32871b), color-stop(8%,#2989d8), color-stop(19%,#aa205a), color-stop(29%,#2989d8), color-stop(30%,#c6c625), color-stop(70%,#2989d8), color-stop(79%,#9b9493), color-stop(90%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #32871b 0%,#2989d8 8%,#aa205a 19%,#2989d8 29%,#c6c625 30%,#2989d8 70%,#9b9493 79%,#207cca 90%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #32871b 0%,#2989d8 8%,#aa205a 19%,#2989d8 29%,#c6c625 30%,#2989d8 70%,#9b9493 79%,#207cca 90%,#7db9e8 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #32871b 0%,#2989d8 8%,#aa205a 19%,#2989d8 29%,#c6c625 30%,#2989d8 70%,#9b9493 79%,#207cca 90%,#7db9e8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32871b', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #32871b 0%,#2989d8 8%,#aa205a 19%,#2989d8 29%,#c6c625 30%,#2989d8 70%,#9b9493 79%,#207cca 90%,#7db9e8 100%); /* W3C */
    
     
  16. Floris

    Floris Guest

    Screen shot 2011-09-18 at 8.34.17 PM.png

    from the above

    i crop this image:

    Screen shot 2011-09-18 at 8.34.05 PM.png

    and replace it with this css3 code

    Code:
    background: #8eaec3; /* Old browsers */
    background: -moz-linear-gradient(top, #8eaec3 0%, #b7d5e9 2%, #a5cae4 8%, #a1c8e3 14%, #9cc5e1 53%, #a3c9e3 59%, #a3c9e3 63%, #94c0df 75%, #78b0d6 88%, #66a6d1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8eaec3), color-stop(2%,#b7d5e9), color-stop(8%,#a5cae4), color-stop(14%,#a1c8e3), color-stop(53%,#9cc5e1), color-stop(59%,#a3c9e3), color-stop(63%,#a3c9e3), color-stop(75%,#94c0df), color-stop(88%,#78b0d6), color-stop(100%,#66a6d1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8eaec3 0%,#b7d5e9 2%,#a5cae4 8%,#a1c8e3 14%,#9cc5e1 53%,#a3c9e3 59%,#a3c9e3 63%,#94c0df 75%,#78b0d6 88%,#66a6d1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8eaec3 0%,#b7d5e9 2%,#a5cae4 8%,#a1c8e3 14%,#9cc5e1 53%,#a3c9e3 59%,#a3c9e3 63%,#94c0df 75%,#78b0d6 88%,#66a6d1 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #8eaec3 0%,#b7d5e9 2%,#a5cae4 8%,#a1c8e3 14%,#9cc5e1 53%,#a3c9e3 59%,#a3c9e3 63%,#94c0df 75%,#78b0d6 88%,#66a6d1 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8eaec3', endColorstr='#66a6d1',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #8eaec3 0%,#b7d5e9 2%,#a5cae4 8%,#a1c8e3 14%,#9cc5e1 53%,#a3c9e3 59%,#a3c9e3 63%,#94c0df 75%,#78b0d6 88%,#66a6d1 100%); /* W3C */
    
    resulting in this css3 output
    Screen shot 2011-09-18 at 8.34.39 PM.png

    you can use hex, rgb, rgba, hls, hlsa
     
    8thos, jmurrayhead and Darkimmortal like this.
  17. CyberAP

    CyberAP Well-Known Member

    It can be done like that:
    linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.25) 15%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.75) 85%, rgba(255,255,255,1));
     
  18. Shelley

    Shelley Well-Known Member

    I like to use css(3) where possible and I do when the occasion arises but I doubt I will anytime soon use the csss gradient and stick with using image gradients because I find creating gradients (or more so) the complex gradients I create can't be done using css3. Maybe i am wrong and they can but i find for now it's just easier sticking to the image rather than using it's css counterpart.
     
  19. Romchik®

    Romchik® Well-Known Member

    New style at our site/forum using simple gradients. I think it looks good.
     
    sitwi, Pavel Safonov and CyberAP like this.
  20. Floris

    Floris Guest

Share This Page