Basic CSS3 gradients support

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.webp
 
Upvote 11
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.
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.
 
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.
 
Extra CSS field is perfect for it, you'd also have much more control :).
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.
 
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.
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...

Image%202011.09.18%202:41:38%20AM.png


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.
 
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.
 
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))
 
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.webp

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 */
 
Screen shot 2011-09-18 at 8.34.17 PM.webp

from the above

i crop this image:

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

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.webp

you can use hex, rgb, rgba, hls, hlsa
 
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.
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));
 
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.
 
Top Bottom