Get a free trial // Grow your CSS skills // Land your dream job

Click to fire CSS handgun on Codepen!

  • NIX
    # October 18, 2013 at 10:53 pm

    Here is a snippet that I’m using on a project but I thought it was pretty cool so, I put it on Codepen.

    It’s pretty fun to sit there and pull the trigger. Maybe it needs a sound effect.


    # October 19, 2013 at 2:57 pm


    # October 21, 2013 at 8:53 am

    Gracias senor.

    # October 21, 2013 at 3:10 pm

    its so sick!i think something should happen to the text though as the bullet passes, maybe overlay an image of the text shattered? i don’t know , but its sick!

    # October 22, 2013 at 12:15 am

    Thanks @Attila!

    # October 24, 2013 at 5:17 pm

    That’s really cool! – A sound effect would help make this even better. Have you thought about localizing the click to only work on the trigger area? (although that might confuse some people)

    # October 24, 2013 at 8:22 pm

    To my knowledge that wouldn’t work. You can only cause a transition on another element if that element is a child of the parent that is clicked.

    I’m sure you could do whatever you want with jQuery but it was important for me the keep it CSS only.

    Also, I thought about a sound effect but I have a weird philosophical objection to sound on websites. At least forced sound. Not like a video. Tends to take the user by surprise which makes for bad UX.

    # October 25, 2013 at 5:54 pm

    I just noticed this doesn’t work in IE 10. The :active selector seems to not work. I tried replacing it with :hover and it works.

    Why does :active not work in IE?

    # October 25, 2013 at 6:56 pm

    It doesn’t work in IE because the child elements are getting in the way of making the parent active. To fix this add

    background-color: rgba(0,0,0,0);

    to the #gun div and change the z-index of all of the children to a negative number appropriate to where they need to be. This will place the parent div on top (the transparent background color makes it clickable and the height and width gives it the area to click). When you do this it will work in IE.

Viewing 9 posts - 1 through 9 (of 9 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