Click to fire CSS handgun on Codepen!

[nixnerd]

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.

Enjoy!

http://codepen.io/Joe_Temp/pen/BEdfz

[chrisburton]

Nice!!!

[BlueIceDJ]

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)

[BlueIceDJ]

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

height:350px;
width:550px;
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.

[Author]

Posts