Grow your CSS skills. Land your dream job.

transition a tabs background

  • # July 4, 2012 at 12:03 pm

    i have a drop down menu that transitions in when the tab is hovered on with opacity going from 0 to 1. nice.
    the tab also changes its color to match the color of the drop down.
    however i can’t transition the tab with opacity because then the tab is missing and the words can’t be seen. i tried using background as the property to transition but that doesn’t work because my colors are css3 gradients and you can’t transition gradients.

    i tried making an after element and having that have an opacity that transitions in, but safari doesn’t allow transitioning on pseudo elements.
    so what have others done in this situation, where you want the tab to match the drop down an transition in also?

    # July 4, 2012 at 12:13 pm

    …and i resort to jquery for my weird problems…..

    # July 4, 2012 at 12:15 pm

    Have you got a link you can show us?

    # July 4, 2012 at 12:22 pm

    nope…
    its fine… I’m using jquery. i found my own way of making it work without adding an empty div just for transitions…
    well there is an empty div… but its added with jquery which makes it look neater.

    the empty div has an opacity that is transitioned and this way the tab is left alone.
    when I’m done ill show it to you and you can tell me if what i did was stupid or smart….

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".