Grow your CSS skills. Land your dream job.

Fade Areas of the Page

  • Anonymous
    # February 20, 2012 at 6:56 pm

    I would like to know how to replicate the faded effect on the sidebar here: http://srobbin.com/

    The sidebar is dimmed, keeping focus on the content area. When you mouse over the sidebar, it brightens to a more readable opacity/color.

    The code seems to be:


    .ghost { opacity: .4; /* -webkit-transition: opacity .2s linear; */ }
    .ghost:hover { opacity: 1; }

    My questions are (1) is that the code, (2) how does it work and (3) will it work in all browsers?

    # February 20, 2012 at 7:21 pm

    1. Yes, that is the relevant code.
    2. Opacity works as the name suggest that it would; 0.4 is the equivalent of 40% opacity. So when hovering, the element goes from 40% to 100% opacity, the transition is just there to make the effect smoother.
    3. In regards to browser support, you can check http://caniuse.com (opacity, transitions).
    # February 20, 2012 at 8:52 pm

    You would need to add all the other prefixes on the transition for browser support, like this:

    -o-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;

    But otherwise, you’ve got the correct code.

    # February 20, 2012 at 9:16 pm

    @cnwtx Don’t forget -ms-transition. IE10 will support transitions, and we want to be as future proof as possible.

    Anonymous
    # February 20, 2012 at 10:55 pm

    Is the transition element necessary? If I just wanted the opacity to change, does there need to be a transition involved?

    # February 20, 2012 at 10:57 pm

    There doesn’t need to be a transition, hence it being commented out in the code you found on srobbin.com. That being said, it is certainly a nicer effect with the transition.

    Anonymous
    # February 20, 2012 at 11:04 pm

    Thanks @joshuanhibbert

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

You must be logged in to reply to this topic.

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