Working with gradients

[Neil E.]

I've been experimenting with rounded tabs for the navtabs. Considering that the upper "tab" is a separate entity than the lower "body" of the navbar, I gave up on using gradients for both areas. I found it too hard to match colors since it was going light/dark/light for the tab and repeating the same light/dark/light for the navbar. This put the two light areas together and it looked strange.

Take this forum as an example, the tab is a solid light blue and the navbar has a gradient. There is no smooth transition between them. I'm wondering how to apply a single gradient to the tab plus navbar. This means the gradient would start above "forum index" and end below "watched threads".

 

[Shelley]

View attachment 37311
I've been experimenting with rounded tabs for the navtabs. Considering that the upper "tab" is a separate entity than the lower "body" of the navbar, I gave up on using gradients for both areas. I found it too hard to match colors since it was going light/dark/light for the tab and repeating the same light/dark/light for the navbar. This put the two light areas together and it looked strange.

Take this forum as an example, the tab is a solid light blue and the navbar has a gradient. There is no smooth transition between them. I'm wondering how to apply a single gradient to the tab plus navbar. This means the gradient would start above "forum index" and end below "watched threads".

You'll have to create and persevere. I can understand why the devs chose to create the gradients and apply them as they did (for old browser fall back) but when you apply bright, dark css colours the gradients (xf gradients) won't fit nicely as they are mainly catered for light background colours. Example is when you use the xf gradients on black they look hideous, you really have to design the gradient to compliment the colour as one gradient that works nicely for one colour won't always suit on another background colour.

 

[Neil E.]

Shelley are there more gradient choices available in the default XF styling or is it a single light/dark transition only?

If there was a light/dark that could be used with a dark/light to give the look of one large transition, that would be good enough for me. I have no idea how these transitions are created in the first place.

 

[JacquiiDesigns]

I gave up on using gradients for both areas. I found it too hard to match colors...

A tool I've used for the past several years and swear by when matching colors is concerned is Free HTML Color Picker which you can download free at http://www.allgraphicstools.com/

HTH

J.

 

[Shelley]

Shelley are there more gradient choices available in the default XF styling or is it a single light/dark transition only?

If there was a light/dark that could be used with a dark/light to give the look of one large transition, that would be good enough for me. I have no idea how these transitions are created in the first place.

There's not I'm afraid. There's also other factors you have to consider other than the transition of the gradient not suit all colours. There's also the height issues, Some gradients were only catered for fixed heights and I noticed especially on alot of custom styles that use xf gradients the gradients look odd and don't suit on larger heights. Take for example if you create a larger height for the catergorystrip area. That's just one example of many so be aware there is a height issues you can face as well as colour, transitional/opacity issues.

 

[Neil E.]

MsJC the color picker looks good, thank you.

Let's look at one spot with excellent gradients:


Is the yellow/orange area gradient a custom one because of the height?

 

[Shelley]

MsJC the color picker looks good, thank you.

Let's look at one spot with excellent gradients:
View attachment 37314

Is the yellow/orange area gradient a custom one because of the height?

Yes.

 

[JacquiiDesigns]

MsJC the color picker looks good, thank you.

Let's look at one spot with excellent gradients:
View attachment 37314

Is the yellow/orange area gradient a custom one because of the height?

You're welcome!
And hmmm - this actually looks like the yellow color is solid with the gradient positioned to the bottom.

 

[DRE]

View attachment 37311
I've been experimenting with rounded tabs for the navtabs. Considering that the upper "tab" is a separate entity than the lower "body" of the navbar, I gave up on using gradients for both areas. I found it too hard to match colors since it was going light/dark/light for the tab and repeating the same light/dark/light for the navbar. This put the two light areas together and it looked strange.

Take this forum as an example, the tab is a solid light blue and the navbar has a gradient. There is no smooth transition between them. I'm wondering how to apply a single gradient to the tab plus navbar. This means the gradient would start above "forum index" and end below "watched threads".

That looks dope. The shapes remind me of Super Mario World.

 

[Neil E.]

Just experimenting.......