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

Working with gradients

Discussion in 'Styling and Customization Questions' started by Neil E., Nov 25, 2012.

  1. Neil E.

    Neil E. Active Member

    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".
  2. Shelley

    Shelley Well-Known Member

    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.
    Jake Bunce likes this.
  3. Neil E.

    Neil E. Active Member

    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.
  4. MsJacquiiC

    MsJacquiiC Well-Known Member

    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 ;)

    Jake Bunce and 8thos like this.
  5. Shelley

    Shelley Well-Known Member

    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.
    Jake Bunce likes this.
  6. Neil E.

    Neil E. Active Member

    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?
  7. Shelley

    Shelley Well-Known Member

    Jake Bunce likes this.
  8. MsJacquiiC

    MsJacquiiC Well-Known Member

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

    DRE Well-Known Member

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

    Neil E. Active Member

    Just experimenting.......

Share This Page