Grow your CSS skills. Land your dream job.

CSS Difficulty bar

  • # February 16, 2013 at 11:51 am

    So, hello everyone, my name is Plamen, I’m 18 from Bulgaria and in a quick change of subject, I’m need of your help. I’ve made a simple difficulty bar for a tutorial website which when hovered over must display the difficulty of the tutorial. But currently it’s level is fixed (just so I can show you the concept). I need it to be changed by the user e.g. When a user posts a new tutorial, he chooses a difficulty for it, lets say from 1 to 5 and if he chooses 1 then:

    .diffbar:hover .difflvl {
    right: 240px;
    background: lightgreen;
    }

    …if he chooses 2 then:

    .diffbar:hover .difflvl {
    right: 180px;
    background: green;
    }

    and so on, so I don’t have to adjust it manually… Something like an **if statement** e.g. in a perfect world- something like:

    if inputdifficulty= 1 then
    right: 180px;
    background: green;
    end if

    So any advice will be appreciated. And please have in mind I’m not really experienced, so it might take some extra explaining. Thanks :)

    Codepen: http://cdpn.io/yaxrJ

    # February 16, 2013 at 11:56 am

    Wait… I got the codepen link wrong: http://codepen.io/Plamenator/pen/yaxrJ … Hope that’s the right link.

    # February 16, 2013 at 12:26 pm

    You want this as an entirely css? Could use :target, maybe…

    [http://codepen.io/ahabion/pen/HejGz](http://codepen.io/ahabion/pen/HejGz “http://codepen.io/ahabion/pen/HejGz”)

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

You must be logged in to reply to this topic.

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