Basic CSS3 gradients support

[CyberAP]

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:

 

[kkm323]

New style at our site/forum using simple gradients. I think it looks good.

indeed good use of css

 

[digitalpoint]

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.

You are right in that the gradients stop points are based on percentages, NOT a specific number of pixels... so the one time it really wouldn't work is if you used image-based gradients that DIDN'T repeat X or Y. But all other cases (that I can think of) it should be fine.

In the rare cases where the gradient was originally designed to not repeat on one axis, and instead be just the header, I made a compromised and was "okay" with it being percentage based.

See image:

 

[Kier]

I've taken a look at the spec, and it would appear that it is possible (although not particularly widely publicised) to use pixel dimensions for CSS gradient colour stops, so that does open up some interesting possibilities.

Nonetheless, I still have to make sure that there is a decent fall-back for browsers that are not capable of rendering CSS gradients, and it would require some extension of the style properties system to accommodate it, so I would not expect to see this feature in XenForo in the immediate future.

 

[Floris]

http://translate.googleusercontent....n.848/&usg=ALkJrhgIxStCpC_ThxyF8-qnQD37mCgXUA

I see you guys are publishing copyrighted content on your web site.

Please remove anything I have ever released on xenforo.com / xenfans.com that has been republished on your site without my written permission within reasonable time.

I've got a PM and the content has now been removed. Just so that's clear.

 

[DRE]

smh @ my school library still using IE7. Not everyone has the latest up-to-date browsers.

 

[psTubble27]

smh @ my school library still using IE7. Not everyone has the latest up-to-date browsers.

It would be safer to say that almost no one has the latest browsers; even more so, the regular nightly builds of Safari mentioned in the OP. Unfortunate, but that's the reality, so I think that the implementation of this in the core xF would be sensible only a year or two hence. Even as it is now, some xF features are pushing the boundaries of all but the most modern browsers.

 

[DRE]

It would be safer to say that almost no one has the latest browsers; even more so, the regular nightly builds of Safari mentioned in the OP. Unfortunate, but that's the reality, so I think that the implementation of this in the core xF would be sensible only a year or two hence. Even as it is now, some xF features are pushing the boundaries of all but the most modern browsers.

Man my site looks horrible on IE7. smh.

 

[digitalpoint]

Man my site looks horrible on IE7. smh.

I suspect IE7 users are used to the entire Internet looking horrible. They know nothing different, so does it really matter? lol

 

[digitalpoint]

So was bored this afternoon and added CSS3 gradients to everywhere that XenForo uses gradients. It was surprisingly easy via the style property editor... and since there isn't a lot of unique gradients used it wasn't terribly difficult since I really only needed to build 5 or 6 different CSS3 gradients.

XenForo is already fast, but eliminating the HTTP requests for gradients is nice.

I just did webkit support (Chrome, Safari, iOS, Android) for now, but I might go back and add Firefox, Opera and Internet Explorer 10 support (for anything that doesn't support the CSS gradients I built, it simply falls back to the image-based ones).

 

[Andy.N]

So was bored this afternoon and added CSS3 gradients to everywhere that XenForo uses gradients. It was surprisingly easy via the style property editor... and since there isn't a lot of unique gradients used it wasn't terribly difficult since I really only needed to build 5 or 6 different CSS3 gradients.

XenForo is already fast, but eliminating the HTTP requests for gradients is nice.

I just did webkit support (Chrome, Safari, iOS, Android) for now, but I might go back and add Firefox, Opera and Internet Explorer 10 support (for anything that doesn't support the CSS gradients I built, it simply falls back to the image-based ones).

Terribly interested to learn how to do this. The stock style uses lots of @imagePath/xenforo/gradients/category-23px-light.png so I would love to eliminate it with CSS

 

[digitalpoint]

I'm just using the free-form box that lets you add stuff to the style property.

For example, something using the category-23px-light.png background gradient I'm adding this (assuming the "regular" background is using @secondaryLighter as it's base color).

background: @secondaryLighter -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);

Example is just for webkit browsers of course...

 

[Shelley]

Here's a guide that Anthony Parsons posted which people might find useful and interested if they want to go the css3 gradient route http://xenforo.com/community/resources/css3-gradient-correct-application.633/

 

[Andy.N]

I'm just using the free-form box that lets you add stuff to the style property.

For example, something using the category-23px-light.png background gradient I'm adding this (assuming the "regular" background is using @secondaryLighter as it's base color).

background: @secondaryLighter -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);

Example is just for webkit browsers of course...

Great. Thanks for the example.
How would you provide fall-back image then? If I keep the background image url in the style properties and add this CSS3 at the bottom box, this will just call the image first and by step the CSS, correct?

 

[digitalpoint]

Yeah, just leave the image definition and add the CSS one... if there is a CSS3 gradient definition the browser understands then it will use that and not bother loading the gradient image from the default definition.

 

[DRE]

New style at our site/forum using simple gradients. I think it looks good.

Looks good. Now I know why when I've clicked 'view background image' on a site and instead of taking me to the gradient it took me to the background image of something else.

 

[digitalpoint]

I went back and added support for the other browser as well as handling gradients defined outside of the style properties (directly within the .css templates). So now it supports Firefox, Safari, Chrome, Opera, iOS, Android and Internet Explorer 10+... with a graceful fallback to the image-based gradients. So depending on the page you are viewing, it cuts 3-5 HTTP requests out now.

It's probably in my mind, but it actually makes things feel even faster somehow.

 

[DRE]

I went back and added support for the other browser as well as handling gradients defined outside of the style properties (directly within the .css templates). So now it supports Firefox, Safari, Chrome, Opera, iOS, Android and Internet Explorer 10+... with a graceful fallback to the image-based gradients. So depending on the page you are viewing, it cuts 3-5 HTTP requests out now.

It's probably in my mind, but it actually makes things feel even faster somehow.

How do you, where do you get the CSS3 gradient CSS code from to support all those browsers?

 

[digitalpoint]

You just have to use all the vendor specific definition prefixes for now.

 

[euantor]

How do you, where do you get the CSS3 gradient CSS code from to support all those browsers?

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

The above site should help out with that It also lets you create your gradients using a GUI so you can see the outcome as you create it.

 

[CyberAP]

I hope we'll see an extended CSS3 properties support in XenForo 1.2, like gradients. Specs now've been almost finished and polished so it is now safe to use them with IE fallback. It's also confirmed that Opera starting with version 12.50 will support these properties unprefixed: transition, animation, transform. I think other browsers will do the same thing soon. Here is a proper order of prefixes, just FYI:

filter: IE fallback;
-webkit-property: contents;
-moz-property: contents;
-ms-property: contents;
-o-property: contents;
property: contents;

But in some cases we don't need all the prefixes, this should be also taken into consideration.