Grow your CSS skills. Land your dream job.

Pure CSS3 Star Wars Lightsaber Checkboxes

  • # May 19, 2013 at 7:38 pm

    Hey guys,

    New here, so hopefully I am posting in the correct spot (or that this is allowed). I just wanted to show off a new snippet I made today.

    It uses the checkbox “hack” (:checked ~ div) to create click events using just CSS. It’s not really meant to be super UI/UX friendly, but it’s still pretty neat. Anyways, here’s the links. Let me know what you guys think.

    Thanks!

    http://codepen.io/ncerminara/pen/KzurJ

    http://scotch.io/demos/pure-css3-star-wars-lightsaber-checkboxes

    # May 19, 2013 at 10:51 pm

    That’s pretty cool. Would be even better if you could add sound effects. And i’m not sure if it’s just me but there is light left behind when disable the lightsaber.

    # May 20, 2013 at 9:19 am

    I know, it happens on my machine, too. I think it’s related to the experimental css3 features being used and memory. Thanks for checking it out

    # May 20, 2013 at 10:38 am

    That is too cool. Kudos.

    # May 20, 2013 at 5:54 pm

    Interesting, this fixed the light being left behind issue.

    Per: http://www.reddit.com/r/css/comments/1entbi/pure_css3_star_wars_lightsaber_checkboxes/ca2l4tv

    # May 20, 2013 at 5:55 pm

    div {
    -webkit-transform : translateZ(0);
    -o-transform : translateZ(0);
    -moz-transform : translateZ(0);
    -ms-transform : translateZ(0);
    transform : translateZ(0);
    }

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

You must be logged in to reply to this topic.

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