Mobile Friendly Website


Doing it with style

CSSplay Whack-a-Rat COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

hi there

this is great! really didnt know this was possible with css only

please could you give explanations as to how the score is recorded and how i would be able to put in an alert or a function after x amount of rats are click on?
(11.02.2013, 12:44)

CSS is not a programming language so it is not possible for CSS to know when a x number of rats have been hit.
The counter is just a vertical list of numbers (div id="scored") that are held in position by the inputs in the div id-"scores".
When a rat is hit then the input changes from checked to unchecked and the bottom margin of that input is set to -50px so the pile of numbers moves upwards by -50px to show the next number in the list.
(11.02.2013, 14:45)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page