The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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


    # February 16, 2013 at 11:56 am

    Wait… I got the codepen link wrong: … Hope that’s the right link.

    # February 16, 2013 at 12:26 pm

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

    []( “”)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed