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

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.


    # 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

    This reply has been reported for inappropriate content.

    That is too cool. Kudos.

    # May 20, 2013 at 5:54 pm

    Interesting, this fixed the light being left behind issue.


    # 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.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed