Resource icon

CSS3 Gradient Correct Application

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.

I wanted to post this resource to outline to those who customise their Xenforo styles that you can quickly and easily use CSS3 gradients using the Xenforo Style Property Colours, without restricting yourself to what some designers do by using hard coded colours in their gradients, instead of using CSS gradients the same as PNG, being to apply a shine or texture over an existing base colour.

Let me use Flexile as an example. It uses a header gradient .png to provide the shine over a base...

Read more about this resource...
 
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.webp

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

Screen Shot 2012-04-22 at 11.47.47 AM.webp
 
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.webp
 
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.
 
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.

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:
 
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.
Anthony,
How have you done with replacing Flexile gradient png with CSS3? I'm using that style and interested in applying CSS3 for it.
 
Here is the default blue that has the gradients already done: http://xenforo.com/community/threads/flexile.29335/page-59#post-353047

The gradients are just that, dark or light gradients that work directly from the style colour properties.
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.
 
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:

Anthony Parsons said:
You could go through your CSS files and literally drop around 60 uses of gradient in a Xenforo style just by applying the above, thus a massive performance improvement in loading time to a good majority of your users who utilise current web standards browsers.

Can you show me an example of some statistics of what you mean etc?
 
Can you show me an example of some statistics of what you mean etc?
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
 
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.
 
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.
So you put this in extra.css?
 
You just can't put them in style properties, as it will only recognise one background, not multiple.
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/
 
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.
 
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.

Too much work. That's something I would only try figuring out how to do if I had alot of time on my hands.
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.
 
Top Bottom