J.me

CSS Captcha 0.1 beta

With coming of the CSS 3, it is now possible to draw using merely HTML and CSS. After seeing some awesome work that can be done with CSS 3, one of my friend suddenly get an idea to create a captcha. Thinking that bot today might haven’t able to pass this kind of captcha, I created this, CSS Captcha. The captcha that didn’t use any image. It just simply using HTML and CSS to draw characters in your screen. I might be not the first one to create this though. 🙂

Click here for demonstration

This is a very simple captcha. Giving the ability of CSS 3, we can create a better and more eye-candy captcha soon. Yeah, we know that it is possible to do animation in CSS 3. There is also some useful pseudo state in CSS, such as :hover (my favorite!), imagine the captcha that need a mouse hover to be completely seen! That might be impossible for bot.

However, the browser support is still minimum. Internet Explorer, on other hand, didn’t support CSS 3 until the version 9. So we still need to wait for a while until IE 9 officially released. Also, browser support for CSS 3 currently is still using browser specific property. So cross browser compability is a pain. Fortunately, I add a feature to automatically add browser specific properties, as long as one of the property is there, either using the browser specific property or from CSS specification. 🙂

Feature:
– Render captcha using HTML and CSS alone
– Rotation and scaling support
– Multiple text color (chosen randomly)
– Changeable background color
– Adjustable length (maximum 32 character)
– Changeable template/font
– Automatically add browser specific properties for cross compability
– Lightweight

The good:
– Since it only output the HTML and CSS, there is no much processing in the server
– It outputs directly to the HTML, there is no external resource needed at all, so it loads at the same time the page loaded

Downside:
– Support for Internet Explorer is minimum or no at all
– Rotation and scaling break the text a little (still readable), since it is only smart placement of multiple div element

Supported browser:
– Google Chrome 5.0
– Mozilla Firefox 3.6
– Opera 10.5
– Safari 5.0

Server Requirement:
– PHP 5

License: GNU GPL

Download

Enjoy!

5 comments | Leave a comment

  1. buzzknow June 24, 2010 17:42

    mantaabbbbb bgt om!!!

    thanks y 🙂

  2. Philip Petrov June 30, 2010 12:34

    Error on the demo page:

    Fatal error: Call to undefined method CSS_Captcha::show_all_characters() in /home/keagzcom/public_html/projects/csscaptcha/index.php on line 149

    • keaglez June 30, 2010 17:27

      Nice catch! I forgot to sync the files on the demo page. It should work now.

      Thanks Phil.

  3. rainer.flame July 13, 2010 18:55

    does this applicable to my wordpress blog??

    • keaglez July 20, 2010 04:28

      Sure it is.

      However, you might need to understand the WordPress hook for comment in order to apply it. Well, when I get a more better version with wider browser support, I will make the plugin for WordPress.

Leave a comment